HTML/CSS - 为什么 float:left 呈现为“不可见”？

发布于 2024-09-16 03:17:47 字数 350 浏览 9 评论 0原文

如果一个 div 中包含两个 div：

<div style="border:1px;">
    <div style="float:left;background-color:red;width:20px;height:20px;">
    <div style="float:left;background-color:red;width:20px;height:20px;">
</div>

两个内部 div 会呈现为“不可见”，因为容器 div 不会拉伸以允许它们填充，就好像它们不存在一样。这会产生难看的重叠/空白等。

您如何解决这个问题？

原文

If you have two divs contained within a div:

<div style="border:1px;">
    <div style="float:left;background-color:red;width:20px;height:20px;">
    <div style="float:left;background-color:red;width:20px;height:20px;">
</div>

The two inner divs are rendered as 'invisible', as in the container div doesn't stretch to allow them to fill, as if they were not there. This creates ugly overlaps/whitespace etc.

How do you go about resolving this issue?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笨笨の傻瓜 2024-09-23 03:17:47

插入第三个div：

<div style="clear:both;"></div>

Insert the third div:

<div style="clear:both;"></div>

回复收藏 0 原文

眼泪都笑了 2024-09-23 03:17:47

我认为这可能是因为您忘记关闭标签，请尝试以下操作：

<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"></div>
<div style="float:left;background-color:green;width:20px;height:20px;"></div>
</div>

I think it may be because you are forgetting to close the tags, try this:

<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"></div>
<div style="float:left;background-color:green;width:20px;height:20px;"></div>
</div>

回复收藏 0 原文

乖乖 2024-09-23 03:17:47

尝试添加（或clear left），这是赋予浮动元素生命力的常用方法。容器

<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"> ... </div>
<div style="float:left;background-color:red;width:20px;height:20px;"> ... </div>
<br style="clear:both"/>
</div>

Try to add the <br style="clear:both"/>, (or clear left) it is a common method to give life to floated elements within a container

<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"> ... </div>
<div style="float:left;background-color:red;width:20px;height:20px;"> ... </div>
<br style="clear:both"/>
</div>

回复收藏 0 原文

叹倦 2024-09-23 03:17:47

父元素永远不会扩展以包含浮动子元素。虽然 IE<8 确实做到了这一点，但这是这个无能的浏览器中长期存在的错误（数百万个错误之一）。最好的解决方案是浮动父级、设置高度/宽度或在 CSS 中使用 Overflow:auto。

回复收藏 0 原文

夏雨凉 2024-09-23 03:17:47

外部 div 不是浮动的，因此除非您显式设置高度，否则在这种情况下它不会显示（边框除外）。将外部 div 的高度设置为 20px 或使其浮动。

回复收藏 0 原文

忆沫 2024-09-23 03:17:47

您没有/不能在 div 中放置任何内容是否有原因？由于没有内容，它们重叠/显示不可见。

<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"></div>
<div style="float:left;background-color:blue;width:20px;height:20px;"></div>
</div>

将显示相邻的两个 div（已测试 IE6、Chrome 3、Firefox 3.5、IE7）

Is there a reason why you aren't/can't put any content in the divs? They overlap / are displayed invisible since there is no content.

<div style="border:1px;">
<div style="float:left;background-color:red;width:20px;height:20px;"></div>
<div style="float:left;background-color:blue;width:20px;height:20px;"></div>
</div>

Will show the two divs next to eachother (Tested IE6, Chrome 3, Firefox 3.5, IE7)

回复收藏 0 原文

~没有更多了~