如何将 DIV 拉伸到 100%，而不拉伸其自动宽度父元素？

发布于 2024-10-09 08:41:34 字数 664 浏览 4 评论 0原文

给定一个具有多个内部 DIV 的 DIV：

<div id="parent">
 <div id="a"></div>
 <div id="b"></div>
</div>

所有 DIV 都具有相同的宽度，而它应该是最宽的 DIV 的宽度。父元素没有明确的宽度。

我怎样才能做到这一点？

我认为 width: 100% 可以做到这一点，但它会将父元素拉伸到窗口大小。

简图：

################
#**************#
#*aaaaaaaaaaaa*#
#**************#
#*********     #
#*bbbbbbb*     #
#*********     #
################

应该是

################
#**************#
#*aaaaaaaaaaaa*#
#**************#
#**************#
#*bbbbbbb     *#
#**************#
################

#代表父DIV，它不会填满整个窗口。

原文

Given a DIV with several inner-DIVs:

<div id="parent">
 <div id="a"></div>
 <div id="b"></div>
</div>

All DIVs are to have the same width, whereas it should be the width of the broadest DIV. The parent element has no explicit width.

How can I achieve that?

I thought width: 100% would do it, but it will stretch the parent element to window size.

Sketch:

################
#**************#
#*aaaaaaaaaaaa*#
#**************#
#*********     #
#*bbbbbbb*     #
#*********     #
################

should be

################
#**************#
#*aaaaaaaaaaaa*#
#**************#
#**************#
#*bbbbbbb     *#
#**************#
################

# represents the parent DIV, which does not fill the whole window.

分享到QQ

分享到微博

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

发布评论

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

佼人 2024-10-16 08:41:34

首先，这种类型的 CSS 相关问题非常适合 SO 姐妹网站 DocType，该网站专注于 CSS 和网站设计。

至于您的问题，div 是块级元素，因此会拉伸到所有给定空间。如果这种情况没有发生，则意味着有其他事情覆盖了这一点。要快速修复，请添加以下内容：

#parent {
    position: relative;
}

它可能会解决您的情况。如果没有，那么您的 CSS 中会在某个地方出现一些冲突，通过提供一些代码或更具体的示例，我们也许能够提供更多帮助。不过，正如 SO FAQ 中详细说明的那样，DocType 更适合此类问题。

First off, this type of CSS related question is perfect for the SO sister site DocType, which focuses on CSS and website design.

As for your problem, divs are block level elements and therefore stretch to all given space. If this is not happening, it means that there is something else overriding this. For a quick fix, add the following:

#parent {
    position: relative;
}

And it might fix your situation. If it does not, then you'll have some conflicts in you CSS somewhere and by maybe giving some code or a more specific example, we might be able to help more. Again, though, as detailed in the SO FAQ, DocType is more suited for questions like this.

回复收藏 0 原文