以下HTML的目标是在同一水平线上设置红色和蓝色div,甚至认为由于宽度较大,蓝色div在右侧被截断。 This jsfiddle表示即使黑/容器样式为overflow:hidden
,蓝色div也不会被截断。这个HTML出了什么问题?
<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
<div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
<div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>
答案 0 :(得分:0)
当父级中没有足够的空间来包含它们时,浮动会向下冲到下一行。
答案 1 :(得分:0)
当你使用float时:父div或对象没有空间继续显示它只显示下一行或下一个区域的所有内容。
也许只是在你的身高值上加一些就可以修复它,或者随后调整那个区域中包含的物体的大小。
答案 2 :(得分:0)
首先,由于容器的宽度,内部div正在包装 - 这是float的基本行为。 此外,&#34;溢出:隐藏&#34;在您的代码中以不同的方式工作。 当内容具有浮动:向左或向右并且容器具有溢出:隐藏时,则容器自动包裹整个内容而不是隐藏内容。 有关详细信息,请查看All About Floats
答案 3 :(得分:0)
浮动元素将水平堆叠,直到到达其父容器的边缘。此时,下一个浮动元素将下降到下一行,其余元素将再次堆叠在一起。
为了达到您正在寻找的效果,您需要一个父容器来容纳足够宽以包含所有浮动的浮动。
那么,只有这样,你才能在父母周围放置另一个能够剪掉溢出的容器。
<div id="row1" style="width:600px;height:100px;background-color:black;position:relative;overflow:hidden;">
<div style="width:800px">
<div id="c1" style="width:400px;height:30px;background-color:red;float:left">aaaa</div>
<div id="c2" style="width:400px;height:30px;background-color:blue;float:left">bbbb</div>
</div>
</div>