我正在尋找一個CSS的解決方案如下： -設置DIV有它的兄弟姐妹寬度
<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>該包裝div具有內嵌顯示器和按預期工作，無論是孩子divs具有動態生成的內容。我需要底部的一個來獲取前一個兄弟的寬度。
非常感謝任何建議提前。
不知道如果我明白你正在嘗試做的，但看起來像一個100％的寬度設置爲最後一個div應該工作：
<div style="width:100%;">
BTW，第一個div風格並不明確，你應該在屬性定義中使用冒號，而不是等號：
<div style="display:inline;">
有沒有必要定義寬度：100％，因爲div是一個塊元素，它的自動寬度爲 – sandeep 2012-03-19 11:58:30
這迫使包裝div佔用整個屏幕，而不是將子div設置爲包裝div的100％... 是的;）很好發現。 – user1278456 2012-03-19 12:00:35
在花費了大量時間處理CSS之後，我決定騰出一些時間並使用表格。 半分鐘=工作完成。 http://jsfiddle.net/XdLku/1/ 現在並不是所有的尖叫和呼喊立即！感謝您的貢獻。 – user1278456 2012-03-19 14:56:30
設置你的div來代替display:inline-block，這樣一來你的DIV將它裏面的內容展開。
http://jsfiddle.net/CpKDX/5/ 在上面的例子中，我希望第二個子div取第一個子div的寬度，即它是以前的兄弟。 – user1278456 2012-03-19 12:57:02
@ user1278456你可以將你的容器div設置爲'display：inline-block'而不是'display：inline'，你可以得到這些結果，http://jsfiddle.net/CpKDX/6/ – 2012-03-19 13:06:14
這不是給我的預期的結果。我想要的是底部div取頂部div的高度，它不在上面的小提琴中。 – user1278456 2012-03-19 13:15:37
UPDATE：這適用於我，我剛剛試了一下：
<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>
這是你想要的嗎？邊框和背景都只是爲了顯示的div）
只要是這樣的：
比方說，你想整個的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>
第二個選擇是，用一個多格...或者你使用style="width:auto;"的動態格...
啊，我恐怕這也不會產生預期的效果。 – user1278456 2012-03-19 14:37:19
，因爲它是母親的div的100％，對吧？如果它不是你想要的，使用寬度：自動爲這兩個內部div ..這是你想要的工作嗎？ – Chris 2012-03-19 15:06:51
@ user1278456：我剛剛更新了它，它適用於我...請讓我知道如果它是你在找什麼:) – Chris 2012-03-19 15:29:20
浮游物和表是如此2000年和晚。在今天的瀏覽器中，我們可以讓兩個兄弟DIV匹配彼此的寬度，而不管哪個更大/更小。
這裏有一個Flexbox的解決方案適用於2016年
.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>但是，如果你不想讓第二個孩子決定寬度（它是比第一個孩子長），這是行不通的。第一個孩子會像第二個孩子一樣寬。 – Skitterm 2016-11-10 18:58:21
@Skitterm真的，但問題是：*「我需要底部的一個來獲取前一個兄弟的寬度」*。 – pilau 2016-11-12 19:25:10
@ pilau是的。正如skitterm所說，如果底部的孩子比以前的兄弟姐妹擁有更大的內容，這種解決方案將無法正常工作。你懂。如果沒有寫'Child＃2'。這可能是一種罕見的情況，但是您知道，在真實世界的場景中，您不會在內容中編寫很多Child＃2。我的意思是不那麼明顯？ – Toskan 2017-07-26 15:44:17
如果你願意放棄一對夫婦的<div>當時的我對你的解決方案：
<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>
記得設置div display:inline-block;
這是另一個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>
DIV是塊元素這是他們自動採取他的父母寬度。檢查這個http://jsfiddle.net/qG7b8/ – sandeep 2012-03-19 11:51:38
它的確如此。兩個內部div的寬度最大化以適合其父寬度。這可能不是你的意思... – 2012-03-19 11:53:59
感謝您的意見。 我給了包裝div一個顯示：內聯屬性，這意味着它需要它的最寬的孩子的寬度。 現在我需要的是第二個子div取第一個子div的寬度。 – user1278456 2012-03-19 11:58:11