设置HTML适应不同分辨率的屏幕。

需求结构如下：

HTML结构代码如下（只是其中一条）：

    
             
     
      
     
             
     
                  
      
       聊聊天
      
            
      
       龙儿可以陪你聊天，但更希望你能找到好友去喝杯咖啡，聊聊生活在这个城市的喜怒哀乐！
      
        
     
    
    

/* css 样式之一*/
@media screen and (min-width:1080px){            .box{ width: 1080px;}.content{width: 1040px;min-height: 190px;}                                 .img{height:180px;}                                 .text{min-height: 180px;}                                 .img{font-size: 48px;line-height: 180px;}            .title{font-size: 46px;line-height: 100px;}             .detail{font-size: 20px;}        }

我对class=content里面的子元素进行了float，所以两个div在一行，其它样式代码不再贴出，查看页面，效果却不是我想要的，如下：

第一个content的内容，覆盖到了第二个content上。原因是我设置了父元素class=text,的高度，在class=detail的div中写入内容超过了复原的高度，所以溢出了，想要父元素自适应包含元素高度，只需要取消父元素text的高度。如下：

@media screen and (min-width:1080px){            .box{ width: 1080px;}.content{width: 1040px;}                                 .img{height:180px;}                                 .img{font-size: 48px;line-height: 180px;}            .title{font-size: 46px;line-height: 100px;}             .detail{font-size: 20px;}        }

我

取消了两层content和text两层父元素的高度，内容是包裹了，但是样式飞了。如下：

因为我取消了content元素的高度，因为里面的子元素img和text是浮动的，浮动元素脱离了文档流，所以包围图片和文本的div不占据空间。content没有高度包裹不了浮动的子元素，所以所有的子元素，浮动到了一起。如下图：

图片来自：

上图中，第二容器，在容器中添加了一行，如下，我在结构代码中，添加了一行：

     
              
      
       
      
              
      
                   
       
        聊聊天
       
            
       
        龙儿可以陪你聊天，但更希望你能找到好友去喝杯咖啡，聊聊生活在这个城市的喜怒哀乐！
       
        
      
        
      
       
           
     

在每个content结束之后，

清除content这个元素中子元素的浮动，清除之后。因为div.clear是区块且没有浮动，会一直在父元素中，所以会撑起父元素，效果如下：

版权声明：本文为博主原创文章，未经博主允许不得转载。