利用CSS的float属性实现二级响应式页面的方法-创新互联

利用CSS的float属性实现二级响应式页面的方法？这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容，让我们一起来看看吧！

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

我们使用float：left属性来实现二级响应式页面

代码如下：

LRColumnSimple.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;
}

在浏览器上的效果如下：

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

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

代码如下：

LRColumnSimpleImageCenter.html

    
  



  

    
说明文字
    

    

    

    
说明文字
    

    
说明文字
    

    

    

    
说明文字
    

    
说明文字
    

    

    

    
说明文字
    

  
  
  

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

在页面上的响应式显示

LRColumnSimpleResponsiveW1.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;
}

效果如下：

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

响应的例子：

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

LRColumnSimpleResponsiveW2.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;
}

说明：

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

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

效果如下：

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

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

LRColumnSimpleResponsive.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媒体查询并且Web浏览器的宽度为760像素或更小，则将float设置为none并取消该列。此外，图像显示的屏幕宽度为80％。它由此在一列中显示。

效果如下：

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

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

感谢各位的阅读！看完上述内容，你们对利用CSS的float属性实现二级响应式页面的方法大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注创新互联行业资讯频道。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。