將div的寬度與上一個/下一個容器對齊

Question

我想創建一個表單，其寬度由表單字段定向。我的表單有一些解釋文本和表單域混合在一起。每個都包含在一個內聯塊集合的div中。

外部div（也與內嵌塊）不應該得到比表單域所需的更寬。如果解釋性文本比表單域寬，那也應該是真的。

• 在設計時，我不知道最寬的表單字段
• 的寬度表單字段的寬度可以在表單之後更改顯示
• 我在尋找一個CSS唯一的解決辦法（ ！沒有JS請）
• 的#outer或任何的div的不應該得到一個固定

首先，這裏是我的小提琴：http://jsfiddle.net/SuperNova3000/PqJk6/

標記

<div id="outer"> 
    <div class="text"> 
     Explaining Text: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    </div> 
    <div class="field"> 
     <label for="text1">Edit #1</label> 
     <input type="text" size="25" id="text1" /> 
    </div> 
    <div class="text"> 
     Some more text: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
    </div> 
    <div class="field"> 
     <label for="text2">Edit #2</label> 
     <input type="text" size="35" id="text2" /> 
    </div> 
</div> 

造型

div { display: inline-block; padding: 10px; } 
#outer { border: black 10px solid; } 
.text { background-color: red; } 
.field { background-color: green; } 

它的樣子

那應該怎麼看起來像

有誰知道如何達到正確的樣子？

Answer 1

我不能％肯定我明白你想要的100％，但我不認爲這是可能的你想要的方式。通常，CSS在佈局時不能「返回」，也就是說，不能讓元素的佈局取決於佈局之後的第二個元素。

這就是說，你可能可以通過使用表「shrink-wrapping」來得到類似的東西。將這些物品放置在一張帶有小號width的表格中，如1px。您需要確保表單項目不包裝（例如white-space: nowrap），然後他們會將表格拉伸到最寬的表格寬度。

Answer 2

希望這是你期待什麼 -

使用CSS Calc function

.field2{ display: block; width: 100%; box-sizing: border-box; } 
#text2{ 
    width: calc(100% - 60px); 
} 

Fiddle