首頁 > 文章 > web前端 > 利用CSS的float屬性實現二級響應式頁面

利用CSS的float屬性實現二級響應式頁面

不言原創: 2018-11-09 16:26:192916瀏覽

本篇文章跟大家介紹的內容是關於利用CSS的float屬性實現二級響應式頁面，內容很詳細，有一定的參考價值。

話不多說，直接來看正文~

我們使用float：left屬性來實現二級響應式頁面（推薦課程：CSS影片教學）

程式碼如下：

LRColumnSimple.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="LRColumnSimple.css" />
<meta charset="utf-8" />
</head>
<body>
 <div class="Container">
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn"><img     style="max-width:90%" src="image/flower.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn"><img     style="max-width:90%" src="image/flowers.jpg"/ alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn"><img     style="max-width:90%" src="image/fruit.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn"><img     style="max-width:90%" src="image/greatwall.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn"><img     style="max-width:90%" src="image/1.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn"><img     style="max-width:90%" src="image/keiskei.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>

LRColumnSimple.css

body {
  background-color:#C0C0C0;
}
.Container {
  background-color:#FFFFFF;  
  width:760px;  
  margin-left:auto;    
  margin-right:auto;
}
.LeftColumn {
 float:left;  
 width:360px;
}
.RightColumn {
  float:left;  
  width:360px;
}
.EndColumn {  
clear:left;
}

在瀏覽器上的效果如下：

利用CSS的float屬性實現二級響應式頁面

補充：將圖像在顯示在框架中間

在框架的中間顯示圖像的話，需要設定為圖像設定text-align：center。

程式碼如下：

LRColumnSimpleImageCenter.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="LRColumnSimple.css" />
<meta charset="utf-8" />
</head>
<body>
  <div class="Container">
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img     style="max-width:90%" src="image/flower.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img     style="max-width:90%" src="image/flowers.jpg"/ alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img     style="max-width:90%" src="image/fruit.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img     style="max-width:90%" src="image/greatwall.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img     style="max-width:90%" src="image/1.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img     style="max-width:90%" src="image/keiskei.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>

效果如下：圖片在中間顯示

利用CSS的float屬性實現二級響應式頁面

在頁面上的響應式顯示

LRColumnSimpleResponsiveW1.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="LRColumnSimpleResponsiveW1.css" />
<meta charset="utf-8" />
</head>
<body>
   <div class="Container">
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img     style="max-width:90%" src="image/flower.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img     style="max-width:90%" src="image/flowers.jpg"/ alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img     style="max-width:90%" src="image/fruit.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img     style="max-width:90%" src="image/greatwall.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
    <div class="LeftColumn">说明文字</div>
    <div class="RightColumn" style="text-align:center;"><img     style="max-width:90%" src="image/1.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>
    <div class="LeftColumn" style="text-align:center;"><img     style="max-width:90%" src="image/keiskei.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="RightColumn">说明文字</div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>

LRColumnSimpleResponsiveW1.css

body {
  background-color:#C0C0C0;
}
.Container {
  background-color:#FFFFFF;  
  width:70%;  
  margin-left:auto;    
  margin-right:auto;
}
.LeftColumn {
  float:left;  
  width:360px;
}
.RightColumn {
  float:left;  
  width:360px;
}
.EndColumn {
  clear:left;
}

利用CSS的float屬性實現二級響應式頁面

如果您在此處縮小寬度，它將變為如下圖所示。它用浮動左對齊，但由於寬度變窄，它變成一個包裹的顯示。此時，當圖像在右邊界上時，圖像的說明文字顯示在圖像上，左邊的說明文字顯示在圖像的底部。

回應的範例：

在先前的HTML中，存在以下問題：當視窗寬度變窄且框架被折疊時，說明文字的位置不能成為同一位置的問題。我來介紹避免這種現象的程式碼。

LRColumnSimpleResponsiveW2.html 利用CSS的float屬性實現二級響應式頁面

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="LRColumnSimpleResponsiveW2.css" />
	<meta charset="utf-8" />
	</head>
	<body>
     <div class="Container">
    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img     style="max-width:90%" src="image/flower.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>

    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img     style="max-width:90%" src="image/flowers.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>

    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img     style="max-width:90%" src="image/fruit.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>

    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img     style="max-width:90%" src="image/greatwall.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img     style="max-width:90%" src="image/1.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img     style="max-width:90%" src="image/keiskei.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>

LRColumnSimpleResponsiveW2.css

body {
  background-color:#C0C0C0;
}
.Container {
  background-color:#FFFFFF;  
  width:70%;  
  margin-left:auto;    
  margin-right:auto;
}
.TextColumnA {
  float:left;  
  width:360px;
}
.ImageColumnA {
  float:left;  
  width:360px;  
  text-align:center;  
  margin-left:auto;  
  margin-right:auto;
}
.TextColumnB {
  float:right;  
  width:360px;
}
.ImageColumnB {
  float:right;  
  width:360px;  
  text-align:center;  
  margin-left:auto;  
  margin-right:auto;
}
.EndColumn {
  clear:both;
}

說明：利用CSS的float屬性實現二級響應式頁面

TextColumnA和ImageColumnA類別用於左側的描述性文本，而框架用於顯示右側的圖像。對於這些類，指定了float：left，並且前面描述的描述性語句位於左側，圖像位於右側。另一方面，TextColumnB和ImageColumnB類別用於右側的描述性文本，而框架用於顯示左側的圖像。在這些類別中，指定了float：right，因此前面描述的描述性文字將放在右側，圖像將放在左側。

當視窗寬度變窄時，先前描述的框架首先顯示在float：left的框架中。即使在指定了float：right的訊框中，也會先執行前面所描述的描述性語句的放置，因此描述框架的文字將顯示在影像上方。

利用CSS的float屬性實現二級響應式頁面效果如下：

利用CSS的float屬性實現二級響應式頁面

######減少視窗的寬度。框架將折疊，但描述文字將在圖像上均勻顯示。 ###############下面我們來看一個基於前面程式碼的實際範例######LRColumnSimpleResponsive.html###

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="LRColumnSimpleResponsive.css" />
<meta charset="utf-8" />
</head>
<body>
  <div class="Container">
    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img  src="image/flower.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img  src="image/flowers.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img  src="image/fruit.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img  src="image/greatwall.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnA">说明文字</div>
    <div class="ImageColumnA" style="text-align:center;"><img  src="image/1.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>
    <div class="TextColumnB">说明文字</div>
    <div class="ImageColumnB" style="text-align:center;"><img  src="image/keiskei.jpg" / alt="利用CSS的float屬性實現二級響應式頁面" ></div>
    <div class="EndColumn"></div>
  </div>
  </body>
  </html>

###LRColumnSimpleResponsive.css###

body {
  background-color:#C0C0C0;
}
.Container {
  background-color:#FFFFFF;  
  width:760px;  
  margin-left:auto;    
  margin-right:auto;
}
.TextColumnA {
  float:left;  
  width:360px;
}
.ImageColumnA {
  float:left;  
  width:360px;  
  text-align:center;  
  margin-left:auto;  
  margin-right:auto;
}
.ImageColumnA img{
  width:200px;
}
.TextColumnB {
  float:right;  
  width:360px;
}
.ImageColumnB {
  float:right;  
  width:360px;  
  text-align:center;  
  margin-left:auto;  
  margin-right:auto;
}
.ImageColumnB img{
  width:200px;
}
.EndColumn {
  clear:both;
}
@media screen and (max-width: 760px) {
   .Container {
       width:95%;
  }  
  .TextColumnA {
      float:none;    
      width:100%;
  }  
  .ImageColumnA {
      float:none;    
      width:100%;    
      text-align:center;    
      margin-left:auto;    
      margin-right:auto;
  }  
  .ImageColumnA img{
      width:80%;
  }  
  .TextColumnB {
      width:100%;
  }  
  .ImageColumnB {
      width:100%;    
      text-align:center;    
      margin-left:auto;    
      margin-right:auto;
  } 
  .ImageColumnB img{
      width:80%;
  }
}

# ##說明：######它與前面的程式碼相同，但如果使用CSS媒體查詢且網路瀏覽器的寬度為760像素或更小，則將float設為none並取消該列。此外，圖像顯示的螢幕寬度為80％。它由此在一列中顯示。 ######效果如下：###############如果視窗的寬度是760像素或更多，則它顯示在兩列中。 ###############當視窗的寬度變成760像素或更小時，它變成一列。影像的寬度也是橫向寬度的80％。 #####################

以上是利用CSS的float屬性實現二級響應式頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何利用設定影像效果？（程式碼實例）下一篇：如何利用設定影像效果？（程式碼實例）

看更多