当前位置：Gxlcms > css > 利用CSS的float属性实现二级响应式页面

利用CSS的float属性实现二级响应式页面

时间：2021-07-01 10:21:17 帮助过：28人阅读

本篇文章给大家介绍的内容是关于利用CSS的float属性实现二级响应式页面，内容很详细，有一定的参考价值。

话不多说，直接来看正文~

我们使用float：left属性来实现二级响应式页面（推荐课程：CSS视频教程）

代码如下：

LRColumnSimple.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.   <link rel="stylesheet" type="text/css" href="LRColumnSimple.css" />
  7. <meta charset="utf-8" />
  8. </head>
  9. <body>
  10.  <div class="Container">
  11.     <div class="LeftColumn">说明文字</div>
  12.     <div class="RightColumn"><img width="200" src="image/flower.jpg" /></div>
  13.     <div class="EndColumn"></div>
  14.     <div class="LeftColumn"><img width="200" src="image/flowers.jpg"/></div>
  15.     <div class="RightColumn">说明文字</div>
  16.     <div class="EndColumn"></div>
  17.     <div class="LeftColumn">说明文字</div>
  18.     <div class="RightColumn"><img width="200" src="image/fruit.jpg" /></div>
  19.     <div class="EndColumn"></div>
  20.     <div class="LeftColumn"><img width="200" src="image/greatwall.jpg" /></div>
  21.     <div class="RightColumn">说明文字</div>
  22.     <div class="EndColumn"></div>
  23.     <div class="LeftColumn">说明文字</div>
  24.     <div class="RightColumn"><img width="200" src="image/1.jpg" /></div>
  25.     <div class="EndColumn"></div>
  26.     <div class="LeftColumn"><img width="200" src="image/keiskei.jpg" /></div>
  27.     <div class="RightColumn">说明文字</div>
  28.     <div class="EndColumn"></div>
  29.   </div>
  30.   </body>
  31.   </html>

LRColumnSimple.css

  1. body {
  2.   background-color:#C0C0C0;
  3. }
  4. .Container {
  5.   background-color:#FFFFFF;  
  6.   width:760px;  
  7.   margin-left:auto;    
  8.   margin-right:auto;
  9. }
  10. .LeftColumn {
  11.  float:left;  
  12.  width:360px;
  13. }
  14. .RightColumn {
  15.   float:left;  
  16.   width:360px;
  17. }
  18. .EndColumn {  
  19. clear:left;
  20. }

在浏览器上的效果如下：

360截图20181109150248602.jpg

补充：将图像在显示在框架中间

在框架的中间显示图像的话，需要设置为图像设置text-align：center。

代码如下：

LRColumnSimpleImageCenter.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.   <link rel="stylesheet" type="text/css" href="LRColumnSimple.css" />
  7. <meta charset="utf-8" />
  8. </head>
  9. <body>
  10.   <div class="Container">
  11.     <div class="LeftColumn">说明文字</div>
  12.     <div class="RightColumn" style="text-align:center;"><img width="200" src="image/flower.jpg" /></div>
  13.     <div class="EndColumn"></div>
  14.     <div class="LeftColumn" style="text-align:center;"><img width="200" src="image/flowers.jpg"/></div>
  15.     <div class="RightColumn">说明文字</div>
  16.     <div class="EndColumn"></div>
  17.     <div class="LeftColumn">说明文字</div>
  18.     <div class="RightColumn" style="text-align:center;"><img width="200" src="image/fruit.jpg" /></div>
  19.     <div class="EndColumn"></div>
  20.     <div class="LeftColumn" style="text-align:center;"><img width="200" src="image/greatwall.jpg" /></div>
  21.     <div class="RightColumn">说明文字</div>
  22.     <div class="EndColumn"></div>
  23.     <div class="LeftColumn">说明文字</div>
  24.     <div class="RightColumn" style="text-align:center;"><img width="200" src="image/1.jpg" /></div>
  25.     <div class="EndColumn"></div>
  26.     <div class="LeftColumn" style="text-align:center;"><img width="200" src="image/keiskei.jpg" /></div>
  27.     <div class="RightColumn">说明文字</div>
  28.     <div class="EndColumn"></div>
  29.   </div>
  30.   </body>
  31.   </html>

效果如下：图像在中间显示

360截图20181109151145431.jpg

在页面上的响应式显示

LRColumnSimpleResponsiveW1.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.   <link rel="stylesheet" type="text/css" href="LRColumnSimpleResponsiveW1.css" />
  7. <meta charset="utf-8" />
  8. </head>
  9. <body>
  10.    <div class="Container">
  11.     <div class="LeftColumn">说明文字</div>
  12.     <div class="RightColumn" style="text-align:center;"><img width="200" src="image/flower.jpg" /></div>
  13.     <div class="EndColumn"></div>
  14.     <div class="LeftColumn" style="text-align:center;"><img width="200" src="image/flowers.jpg"/></div>
  15.     <div class="RightColumn">说明文字</div>
  16.     <div class="EndColumn"></div>
  17.     <div class="LeftColumn">说明文字</div>
  18.     <div class="RightColumn" style="text-align:center;"><img width="200" src="image/fruit.jpg" /></div>
  19.     <div class="EndColumn"></div>
  20.     <div class="LeftColumn" style="text-align:center;"><img width="200" src="image/greatwall.jpg" /></div>
  21.     <div class="RightColumn">说明文字</div>
  22.     <div class="EndColumn"></div>
  23.     <div class="LeftColumn">说明文字</div>
  24.     <div class="RightColumn" style="text-align:center;"><img width="200" src="image/1.jpg" /></div>
  25.     <div class="EndColumn"></div>
  26.     <div class="LeftColumn" style="text-align:center;"><img width="200" src="image/keiskei.jpg" /></div>
  27.     <div class="RightColumn">说明文字</div>
  28.     <div class="EndColumn"></div>
  29.   </div>
  30.   </body>
  31.   </html>

LRColumnSimpleResponsiveW1.css

  1. body {
  2.   background-color:#C0C0C0;
  3. }
  4. .Container {
  5.   background-color:#FFFFFF;  
  6.   width:70%;  
  7.   margin-left:auto;    
  8.   margin-right:auto;
  9. }
  10. .LeftColumn {
  11.   float:left;  
  12.   width:360px;
  13. }
  14. .RightColumn {
  15.   float:left;  
  16.   width:360px;
  17. }
  18. .EndColumn {
  19.   clear:left;
  20. }

效果如下：

360截图20181109152730312.jpg

如果您在此处缩小宽度，它将会变为如下图所示。它用浮动左对齐，但由于宽度变窄，它变成一个包裹的显示。此时，当图像在右边界上时，图像的说明文本显示在图像上，左边的说明文本显示在图像的底部。

360截图20181109153211562.jpg

响应的例子：

在先前的HTML中，存在如下问题：当窗口宽度变窄并且框架被折叠时，说明文字的位置不能成为同一位置的问题。我来介绍避免这种现象的代码。

LRColumnSimpleResponsiveW2.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.   <link rel="stylesheet" type="text/css" href="LRColumnSimpleResponsiveW2.css" />
  7. <meta charset="utf-8" />
  8. </head>
  9. <body>
  10.      <div class="Container">
  11.     <div class="TextColumnA">说明文字</div>
  12.     <div class="ImageColumnA" style="text-align:center;"><img width="200" src="image/flower.jpg" /></div>
  13.     <div class="EndColumn"></div>
  14.     <div class="TextColumnB">说明文字</div>
  15.     <div class="ImageColumnB" style="text-align:center;"><img width="200" src="image/flowers.jpg" /></div>
  16.     <div class="EndColumn"></div>
  17.     <div class="TextColumnA">说明文字</div>
  18.     <div class="ImageColumnA" style="text-align:center;"><img width="200" src="image/fruit.jpg" /></div>
  19.     <div class="EndColumn"></div>
  20.     <div class="TextColumnB">说明文字</div>
  21.     <div class="ImageColumnB" style="text-align:center;"><img width="200" src="image/greatwall.jpg" /></div>
  22.     <div class="EndColumn"></div>
  23.     <div class="TextColumnA">说明文字</div>
  24.     <div class="ImageColumnA" style="text-align:center;"><img width="200" src="image/1.jpg" /></div>
  25.     <div class="EndColumn"></div>
  26.     <div class="TextColumnB">说明文字</div>
  27.     <div class="ImageColumnB" style="text-align:center;"><img width="200" src="image/keiskei.jpg" /></div>
  28.     <div class="EndColumn"></div>
  29.   </div>
  30.   </body>
  31.   </html>

LRColumnSimpleResponsiveW2.css

  1. body {
  2.   background-color:#C0C0C0;
  3. }
  4. .Container {
  5.   background-color:#FFFFFF;  
  6.   width:70%;  
  7.   margin-left:auto;    
  8.   margin-right:auto;
  9. }
  10. .TextColumnA {
  11.   float:left;  
  12.   width:360px;
  13. }
  14. .ImageColumnA {
  15.   float:left;  
  16.   width:360px;  
  17.   text-align:center;  
  18.   margin-left:auto;  
  19.   margin-right:auto;
  20. }
  21. .TextColumnB {
  22.   float:right;  
  23.   width:360px;
  24. }
  25. .ImageColumnB {
  26.   float:right;  
  27.   width:360px;  
  28.   text-align:center;  
  29.   margin-left:auto;  
  30.   margin-right:auto;
  31. }
  32. .EndColumn {
  33.   clear:both;
  34. }

说明：

TextColumnA和ImageColumnA类用于左侧的描述性文本，而框架用于显示右侧的图像。对于这些类，指定了float：left，并且前面描述的描述性语句位于左侧，图像位于右侧。另一方面，TextColumnB和ImageColumnB类用于右侧的描述性文本，而框架用于显示左侧的图像。在这些类中，指定了float：right，因此前面描述的描述性文本将放在右侧，图像将放在左侧。

当窗口宽度变窄时，先前描述的框架首先显示在float：left的框架中。即使在指定了float：right的帧中，也会首先执行前面描述的描述性语句的放置，因此描述框架的文字将显示在图像上方。

效果如下：

360截图20181109160646336.jpg

减小窗口的宽度。框架将折叠，但描述文字将在图像上均匀显示。

360截图20181109160818774.jpg

下面我们来看一个基于前面代码的实际例子

LRColumnSimpleResponsive.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.   <link rel="stylesheet" type="text/css" href="LRColumnSimpleResponsive.css" />
  7. <meta charset="utf-8" />
  8. </head>
  9. <body>
  10.   <div class="Container">
  11.     <div class="TextColumnA">说明文字</div>
  12.     <div class="ImageColumnA" style="text-align:center;"><img src="image/flower.jpg" /></div>
  13.     <div class="EndColumn"></div>
  14.     <div class="TextColumnB">说明文字</div>
  15.     <div class="ImageColumnB" style="text-align:center;"><img src="image/flowers.jpg" /></div>
  16.     <div class="EndColumn"></div>
  17.     <div class="TextColumnA">说明文字</div>
  18.     <div class="ImageColumnA" style="text-align:center;"><img src="image/fruit.jpg" /></div>
  19.     <div class="EndColumn"></div>
  20.     <div class="TextColumnB">说明文字</div>
  21.     <div class="ImageColumnB" style="text-align:center;"><img src="image/greatwall.jpg" /></div>
  22.     <div class="EndColumn"></div>
  23.     <div class="TextColumnA">说明文字</div>
  24.     <div class="ImageColumnA" style="text-align:center;"><img src="image/1.jpg" /></div>
  25.     <div class="EndColumn"></div>
  26.     <div class="TextColumnB">说明文字</div>
  27.     <div class="ImageColumnB" style="text-align:center;"><img src="image/keiskei.jpg" /></div>
  28.     <div class="EndColumn"></div>
  29.   </div>
  30.   </body>
  31.   </html>

LRColumnSimpleResponsive.css

  1. body {
  2.   background-color:#C0C0C0;
  3. }
  4. .Container {
  5.   background-color:#FFFFFF;  
  6.   width:760px;  
  7.   margin-left:auto;    
  8.   margin-right:auto;
  9. }
  10. .TextColumnA {
  11.   float:left;  
  12.   width:360px;
  13. }
  14. .ImageColumnA {
  15.   float:left;  
  16.   width:360px;  
  17.   text-align:center;  
  18.   margin-left:auto;  
  19.   margin-right:auto;
  20. }
  21. .ImageColumnA img{
  22.   width:200px;
  23. }
  24. .TextColumnB {
  25.   float:right;  
  26.   width:360px;
  27. }
  28. .ImageColumnB {
  29.   float:right;  
  30.   width:360px;  
  31.   text-align:center;  
  32.   margin-left:auto;  
  33.   margin-right:auto;
  34. }
  35. .ImageColumnB img{
  36.   width:200px;
  37. }
  38. .EndColumn {
  39.   clear:both;
  40. }
  41. @media screen and (max-width: 760px) {
  42.    .Container {
  43.        width:95%;
  44.   }  
  45.   .TextColumnA {
  46.       float:none;    
  47.       width:100%;
  48.   }  
  49.   .ImageColumnA {
  50.       float:none;    
  51.       width:100%;    
  52.       text-align:center;    
  53.       margin-left:auto;    
  54.       margin-right:auto;
  55.   }  
  56.   .ImageColumnA img{
  57.       width:80%;
  58.   }  
  59.   .TextColumnB {
  60.       width:100%;
  61.   }  
  62.   .ImageColumnB {
  63.       width:100%;    
  64.       text-align:center;    
  65.       margin-left:auto;    
  66.       margin-right:auto;
  67.   } 
  68.   .ImageColumnB img{
  69.       width:80%;
  70.   }
  71. }

说明：

它与前面的代码相同，但如果使用CSS媒体查询并且Web浏览器的宽度为760像素或更小，则将float设置为none并取消该列。此外，图像显示的屏幕宽度为80％。它由此在一列中显示。

效果如下：

360截图20181109162041745.jpg

如果窗口的宽度是760像素或更多，则它显示在两列中。

360截图20181109162201329.jpg

当窗口的宽度变为760像素或更小时，它变为一列。图像的宽度也是横向宽度的80％。

360截图20181109162305201.jpg

360截图20181109162402744.jpg

以上就是利用CSS的float属性实现二级响应式页面的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！