Question

我正在为我的框架构建表单管理器，并希望添加方法以根据传递的参数创建表单元素。每个＆＃34;元素容器＆＃34;有以下内容：

位于容器顶部的验证行。默认情况下，此行处于关闭状态（显示：无），仅在出现javascript验证错误时显示。
标签容器（位于左侧）
表格控制容器（位于右侧）

以下是HTML示例：

 <div class='control_container'>
      <div class='validation'></div>
      <div class='label_container'>
           <label for=''>Label</label>
      </div>
      <div class='elements_container'>
           <div class='element'>
                <input type='text' name='' value='' />
           </div>
      </div>
 </div>

我的问题是我需要使用control_container来分隔标签和元素容器，但还需要label_container和element_container都具有相同的高度，而不管内容如何。这两个容器可能有不同的背景颜色，所以我需要确保对control_container底部的拉伸，并考虑到验证div可能会显示（所以使用position：absolute和top：0可能不起作用）。

我尝试了以下内容：

为control_container提供一个相对位置，两个单独的容器都是绝对位置。由于容器的高度主要取决于标签的高度（如果标签是多行，或者如果element_container中有多个元素，则此选项不起作用。
漂浮（我说更多？：D）

我更喜欢与大多数浏览器兼容的CSS解决方案（包括IE8（我推它要求IE7哈哈）

有什么想法吗？

**其他信息**

我希望布局看起来像这样：

 --------------------- control_container ---------------------
 [Potential validation message (this will be toggled on/off) ]
 [label_container][ elements_container                       ]
 ------------------- end of control_container ----------------

所以label_container（带有标签）和elements_container（带有它的元素）将是彼此相邻的。这两个容器可能具有不同的背景颜色，因此它们应根据最大元素拉伸（高度）。我在这里看到的唯一问题是默认情况下不会显示的验证元素，因此使用绝对定位可能不起作用，因为验证消息可能占据顶部区域并且元素彼此重叠。

Answer 1

HTML：

<div class="controls">
    <div class="message">Test</div>
    <div class="label_container">
    <label for="">Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label Label </label>
    </div>
    <div class="elements_container">
        <div class="element">
           <input type="text" name="test" value="" />
        </div>
    </div>
</div>

CSS：

.controls {
position: relative;
display: table;
width: 100%;
}

.controls .message {
background: red;
padding: 5px;
color: #FFF;
font-weight: bold;
height: 30px;
width: 100%;
display: table-caption;
box-sizing: border-box;
}

.controls .label_container {
display: table-cell;
background: #D3D3D3;
width: 150px;
height: 100%;
margin-top: 30px;
}

.controls .elements_container {
display: table-cell;
background: #A2A7DD;
color: #000;
width: 650px;
height: 100%;
margin-top: 30px;
margin-left: 150px;
}

所有这些都在jsFiddle：Demo

表单元素容器高度

1 个答案: