您的位置：首页 > 其它

关于自适应屏幕，设置子元素浮动，父div不能包裹子div，子元素中内容溢出的问题。

2015-07-14 17:44 561 查看
设置HTML适应不同分辨率的屏幕。

需求结构如下：



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

<body>
<div class="content"><!--用于包裹一条内容-->
        <div class="img"><img src="../img/03.png"></div><!--放置内容图片-->
        <div class="text"><!--放置内容文字-->
            <div class="title">聊聊天</div>
            <div class="detail">龙儿可以陪你聊天，但更希望你能找到好友去喝杯咖啡，聊聊生活在这个城市的喜怒哀乐！</div>
        </div>
    </div><span style="font-family: Arial, Helvetica, sans-serif;"></div></span><span style="font-family: Arial, Helvetica, sans-serif;"></body></span>
/* css 样式之一*/
<pre name="code" class="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的高度。如下：

<pre name="code" class="css">@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没有高度包裹不了浮动的子元素，所以所有的子元素，浮动到了一起。如下图：


图片来自：http://www.jbxue.com/css/31451.html

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

<span style="font-size:12px;"><div class="content"><!--用于包裹一条内容-->
<div class="img"><img src="../img/03.png"></div><!--放置内容图片-->
<div class="text"><!--放置内容文字-->
<div class="title">聊聊天</div>
<div class="detail">龙儿可以陪你聊天，但更希望你能找到好友去喝杯咖啡，聊聊生活在这个城市的喜怒哀乐！</div>
</div>
<span style="background-color: rgb(255, 0, 0);"><div class="clear" style="clear:poth;"></div><!-- 加入不浮动元素 --></span>
</div></span>
在每个content结束之后，清除content这个元素中子元素的浮动，清除之后。因为div.clear是区块且没有浮动，会一直在父元素中，所以会撑起父元素，效果如下：


                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航