CSS：基本布局问题 - 将嵌套元素保持在彼此内部

发布于 2024-07-09 21:04:41 字数 1213 浏览 4 评论 0原文

我不断发现，如果我将 div 嵌套在一起，并且其中一个内部的 div 是浮动的，则外部的 div 不会在其周围扩展。

示例：

<div style='background-color:red; '>
    asdfasdf
    <div style='float:left; background-color:blue; width:400px; height:400px;'>
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
    </div>
    asdfasdf
</div>

我需要对外部 div 执行什么操作才能使其覆盖内部 div？ IE：将它的边框/背景颜色一直放在它周围？

另外，我在这里遇到的一般原则是什么？如果是这样，我应该查找什么才能充分理解它是什么？

谢谢！

编辑

大家好，

感谢您的回答（语义上正确或否）以及链接。

虽然我最终会在最终的工作中使用溢出，但我将接受 Ant P 的答案，因为它是第一个真正有效的答案，并让我摆脱了短期的困境，尽管它冒犯了语义敏感性。

作为一个长期尝试转向像样的 css 布局的 html hack，我当然可以理解并同情使用语义上不正确的 hack 来完成工作，尽管我确信他会在这之后改变这个习惯 =o)

原文

I keep finding that if I have nested divs inside each other, and one of the inner ones is floated, the outer one won't expand around it.

Example:

<div style='background-color:red; '>
    asdfasdf
    <div style='float:left; background-color:blue; width:400px; height:400px;'>
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
    </div>
    asdfasdf
</div>

What do I need to do to the outer div to make it cover the inner one? IE: Put it's border/background color all the way around it?

Also, is there a general principle I am bumping up against here? If so, what should I look up to get a solid understanding of what it is?

Thanks!

Edit

Hi All,

Thanks for the answers, semantically correct and no, and for the links.

Though I will end up using overflow in the final work, I will leave Ant P's answer as accepted, as it was the first one that really worked, and got me out of a short term jam, even though it offends semantic sensibilities.

As a long-time html hack trying to move to decent css layouts, I can certainly understand, and sympathize with, using semantically incorrect hack that gets the job done, though I am sure he will change that habit after this =o)

分享到QQ

分享到微博

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

发布评论

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

浅浅 2024-07-16 21:04:41

您可以使用 overflow:hidden 严格使用 CSS 来完成此操作

<div style='background-color:red;overflow:hidden;'>
...
</div>

You can do it strictly with CSS using overflow:hidden

<div style='background-color:red;overflow:hidden;'>
...
</div>

回复收藏 0 原文

临走之时 2024-07-16 21:04:41

如果您是喜欢解释的人（而不仅仅是“这样做”），这里有一些优秀的文章解释了几种方法：

亢潮 2024-07-16 21:04:41

令人震惊的是，有多少次这是关于 SO 的一些 CSS 问题的基本问题。更令人瞠目结舌的是，有多少次有人给出像Ant P这样的答案。虽然技术上是正确的，但语义上完全不正确。忒弥斯说得绝对正确。只需将 overflow:hidden 添加到浮动 div 的父级即可。有时为了使其与 IE 兼容，您可能必须指定宽度或高度。这就是它的全部内容。

回复收藏 0 原文

情感失落者 2024-07-16 21:04:41

如果您只是浮动外部 div，它将扩展以包含嵌套的 div。在布局中组合浮动和非浮动元素通常很麻烦。

回复收藏 0 原文

海风掠过北极光 2024-07-16 21:04:41

我无法击败已经发布的答案，但我确实有一个很好的提示，可以帮助诊断布局问题，而不会搞乱您的标记。

将此部分添加到 CSS 文件的底部，并在不需要时将其注释掉：

div
{
   border-width: thin !important;
   border-color: Orange !important;
   border-style: solid !important;
}

label, span, /* whatever else you might want to see */
{
   border-width: thin !important;
   border-color: Blue !important;
   border-style: solid !important;
}

通常我会发现实际有效的布局（特别是使用“add a ;带有 clear: Both 样式的 实际上不会正确嵌套

，但有人调整了 CSS，使其可以通过 voodoo 工作。实际上，查看元素的边框很有帮助，在 CSS 中执行此操作意味着您不必接触真正的标记或主 CSS 即可打开边框进行调试。

I can't beat the answers that have been posted, but I do have a good tip for helping to diagnose layout problems without screwing up your markup.

Add this section to the bottom of your CSS file and keep it commented out when you don't need it:

div
{
   border-width: thin !important;
   border-color: Orange !important;
   border-style: solid !important;
}

label, span, /* whatever else you might want to see */
{
   border-width: thin !important;
   border-color: Blue !important;
   border-style: solid !important;
}

Often I'll find that a layout that actually works (particularly one that uses the "add a <br> with a clear: both style) will actually not be nesting <div>'s properly but someone has tweaked the CSS so that it works by voodoo. Actually looking at the borders of your elements helps a lot and doing this in CSS means you don't have to touch your real markup or your main CSS in order to turn the borders on for debugging.

回复收藏 0 原文