2015-01-08 112 views
0

我遇到了关于浮动样式的问题。像下面的html代码:浮动div溢出问题的内容

... 
<body> 
    <div style="float:left;width:25%;height:100px;background-color:red;"></div> 
    <div style="float:left;width:74%;height:100px;border:1px solid black;"> 
     <div style="width:1000px;height:50px;background-color:yellow;"></div> 
     <div style="clear:both;"></div> 
    </div> 
</body> 
... 

效果是,在第2个浮动div的内容溢出。 黄色div在浮动div中,但其宽度超过其父项。 我想知道如何设置CSS样式,使第2个浮动div可以自动套装其子元素的宽度/高度? 我知道清晰的样式可以清除按顺序列出的div的浮动,但如何处理它包含更大的孩子? 我不想用js修改父div的宽度。

回答

0

您可以通过使用min-heightmin-width来实现此目的。通过这种方式,父母会在更大时适应孩子的身高和体重。

看看吧here

0

通过消除widthheight财产(或设置min-heighmin-width财产Stephan mentioned你会做家长的div伸过来的孩子。

http://jsfiddle.net/5ohtx2nc/1/

然而,这引起,如果它们比屏幕第二浮动更宽格将移动到下一行

http://jsfiddle.net/5ohtx2nc/

若y OU坚持其旁边另一两个div之一,你将需要做一些小把戏,比如在How to position two divs side by side where the second width is 100%?

http://jsfiddle.net/5ohtx2nc/3/