Html 将 div 设置为其同级宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9769587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set div to have its siblings width
提问by user1278456
I'm looking for a CSS solution to the following:-
我正在寻找以下 CSS 解决方案：-
<div style="display:inline;">
<div>The content of this div is dynamically created but will always be wider than
the below div.
</div>
<div> Need this div to have the same width as the above div.
</div>
</div>The wrapper divhas an inline display and works as expected, both child divs have dynamically generated content. I need the bottom one to take the width of the previous sibling.
包装器div具有内嵌显示并按预期工作，两个子 div 都有动态生成的内容。我需要底部的一个来占据前一个兄弟姐妹的宽度。
Many thanks for any suggestions in advance.
非常感谢您提前提出任何建议。
回答by Peter Josling
Here's another Flexbox solution which allows for the second child to wrap to match the width of the variable height sibling.
这是另一个 Flexbox 解决方案，它允许第二个孩子换行以匹配可变高度兄弟的宽度。
.wrapper > div {
border: 1px solid;
}
.child {
display: flex;
}
.child div {
flex-grow: 1;
width: 0;
}
.wrapper {
display: inline-block;
}<div class="wrapper">
<div>This div is dynamically sized based on its content</div>
<div class="child"><div>This div will always be the same width as the preceding div, even if its content is longer (or shorter too).</div></div>
</div>Edit:
编辑：
To support multiple divs under .child, where each divis on its own line, add break-after: always;...
要div在 下支持多个s .child，其中每个div都在自己的行上，请添加break-after: always;...
.child div {
flex-grow: 1;
width: 0;
break-after: always;
}
回答by pilau
Floats and tables are so 2000 and late. With today's browsers we can make the two sibling DIVs match each other's width, regardless which is bigger/smaller.
花车和桌子是如此 2000 和晚。使用今天的浏览器，我们可以让两个兄弟 DIV 彼此的宽度匹配，无论哪个更大/更小。
Here's a Flexbox solution fit for 2016:
这是适合 2016 年的 Flexbox 解决方案：
.wrapper {
display: inline-block;
}
.parent {
display: flex;
flex-direction: column;
}
/* For visualization */
.child {
border: 1px solid #0EA2E8;
margin: 2px;
padding: 1px 5px;
}<div class="wrapper">
<div class="parent">
<div class="child">Child number one</div>
<div class="child">Child #2</div>
</div>
</div>回答by Andres Ilich
Set your div to display:inline-blockinstead, this way your div will expand with the content inside of it.
将您的 div 设置为display:inline-block，这样您的 div 将随着其中的内容展开。
回答by Chris
UPDATE: This works with me, I've just tried it:
更新：这对我有用，我刚试过：
<div style="max-width:980px;border:1px solid red;">
<div style="background:#EEE;float:left;">
<div style="width:auto;border:1px solid blue;float:left;">If you use 100% here, it will fit to the width of the mother div automatically.</div>
<div style="border:1px solid green;"> The div will be 100% of the mother div too.</div>
</div>
<div style="clear:both;"></div>
</div>
Is this what you want? The borders and background are just to show the divs ;)
这是你想要的吗？边框和背景只是为了显示 div ;)
Just go like this:
就像这样：
Let's say you want the whole divs be max. 980px (otherwise just leave that out or replace with 100%)...
假设您希望整个 div 最大。980px（否则只需将其删除或替换为 100%）...
<div style="max-width:980px;">
<div style="width:100%;">If you use 100% here, it will fit to the width of the mother div automatically.
</div>
<div style="width:100%;"> The div will be 100% of the mother div too.
</div>
</div>
The second option would be, to use one more div... or you use style="width:auto;"for the dynamic div...
第二种选择是，再使用一个 div... 或者您使用style="width:auto;"动态 div...
回答by arraintxo
Not sure if I understood what you are trying to do, but looks like setting a 100% width to the last div should work:
不确定我是否理解您要执行的操作，但看起来将 100% 宽度设置为最后一个 div 应该可行：
<div style="width:100%;">
BTW the style in the first div is not well defined, you should use a colon instead of a equal sign in the properties definition:
顺便说一句，第一个 div 中的样式定义不明确，您应该在属性定义中使用冒号而不是等号：
<div style="display:inline;">
回答by Andreas Niebuhr
If your willing to give up on a couple of <div>s then I have the solution for you:
如果你愿意放弃几个<div>s 那么我有你的解决方案：
<div style=“display: inline-block;”>
<table>
<tr>
<td>The table automatically makes its siblings the same width</td>
</tr>
<tr>
<td>So this will be as wide</td>
</tr>
</table>
</div>
Remember to set the div display:inline-block;
记得设置divdisplay:inline-block;
