将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

希望这是你所期待的 -

使用CSS Calc function

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

Fiddle

Answer 2

我不是100％肯定我明白你想要什么，但我认为这不可能按照你想要的方式。通常CSS在布局时不能“返回”，即你不能将元素的布局依赖于它后面的第二个元素的布局。

那说你可能通过使用表“收缩包装”得到类似的东西。将项目放在包含width小1px的表格中。您需要确保表单项不会换行（例如white-space: nowrap），然后它们会将表拉伸到最宽表格的宽度。