html - 如何制作两列IE中的自动高度调整？

Question

我需要将两个 li 元素组合在一起，这样如果组中任何一个 li (Field7) 的高度增加，那么另一个 (Field6) 的高度也应该增加（不是它的内容：标签、输入），而不影响其他 li 元素的高度（field1、9、10 等）。

截至目前，我已经实现（见图）如下：

#fld_grp {
    margin: 5px;
    border: 1px solid #008e9c;
    height: auto;
    overflow: hidden;
    padding-bottom: 10px;
}
#fld_grp div.row {
    display: table-row;
    height: auto;
    overflow: hidden;
}
#fld_grp .hd {
    padding-left: 5px;
    line-height: 25px;
    background: #008e9c;
    color: #FFF;
    font-weight: 500;
    font-size: 14px;
}
#fld_grp ul {
    clear: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
    display: table;
}
#fld_grp ul li {
    width: 463px;
    margin: 5px;
    height: auto;
    min-height: 30px;
    float: left;
    list-style: none;
    background: rgba(0, 0, 0, 0.1);
}
#fld_grp ul li.dbl {
    width: 935px;
}
#fld_grp ul li label {
    width: 50%;
    background: rgb(255, 235, 205);
    display: block;
    padding: 5px 10px;
    float: left;
    counter-reset: sub-section;
}
#fld_grp ul li label:before {
    counter-increment: section;
    content: counter(section) ". ";
}
#fld_grp ul li input {
    text-align: start;
    width: 170px;
    height: 20px;
    margin: 2px 15px 0 20px;
    background: none repeat scroll 0 0 transparent;
    border: 1px dashed rgba(255, 228, 196, 0.7);
    cursor: text;
}
#fld_grp ul li input:hover {
    border: 1px solid rgba(255, 228, 196, 0.7);
}
#fld_grp ul li input:focus {
    background: antiquewhite;
    border: 2px solid rgba(127, 255, 212, 0.7);
}

<div id="fld_grp">
    <div class="hd">
        <h3>Field Group1</h3>
    </div>
    <ul>
        <div class="row">
            <li>
                <label>Field1</label>
                <input type="text">
            </li>
            <li>
                <label>Field2</label>
                <input type="text">
            </li>
        </div>
        <div class="row">
            <li>
                <label>Field3</label>
                <input type="text">
            </li>
            <li>
                <label>Field4</label>
                <input type="text">
            </li>
        </div>
        <div class="row">
            <li class="dbl">
                <label>Field5(full field)</label>
                <input type="text">
            </li>
        </div>
        <div class="row">
            <li>
                <label>Field6</label>
                <input type="text">
            </li>
            <li>
                <label>Field7:This Long Label is really very long!</label>
                <input type="text">
            </li>
        </div>
        <div class="row">
            <li>
                <label>Field8</label>
                <input type="text">
            </li>
            <li>
                <label>Field9</label>
                <input type="text">
            </li>
        </div>
        <div class="row">
            <li class="dbl">
                <label>Field10(full field)</label>
                <input type="text">
            </li>
        </div>
    </ul>
</div>

我需要摆脱 Eclipse 给我的警告，以使我的网站符合 W3C 标准以符合 HTML4.01 标准。此外，我注定要让它在 IE7 上运行。

在 Andrew 的建议之后，这里的 CSS 解决了这个问题：

#fld_grp{
    margin: 5px;
    border: 1px solid #008e9c;
    height:auto;
    overflow: hidden;
    padding-bottom: 10px;
}
#fld_grp .hd{
    padding-left: 5px; 
    line-height: 25px; 
    background: #008e9c; 
    color: #FFF; 
    font-weight: 500; 
    font-size:14px;
    }
#fld_grp ul{
    clear:left;
    list-style-type:none;
    margin:0;
    padding:0;
    text-align:left;
    word-wrap: break-word;
}
#fld_grp ul li{
    width:932px;
    margin: 5px;
    height: auto;
    min-height: 35px;
    float:left;
    list-style:none;
    background: rgba(0,0,0,0.1);
    border:1px dashed #8B4513;
    display:table;
}
#fld_grp ul li > div{
    width:466px;
    background:green;
    display:table-cell;
    height:auto;
    min-height:35px;
    float:left;
}
#fld_grp ul li > div label{
    width: 50%;
    background: rgb(255, 235, 205);
    display: block;
    padding: 8px 10px;
    float:left;
}
#fld_grp ul li > div input{
    text-align: start;
    height: 20px;
    margin: 2px 15px 0 20px;
    background: none repeat scroll 0 0 transparent;
    border: 1px dashed rgba(255, 228, 196, 0.7);
    cursor: text;
}
#fld_grp ul li> div.dbl{
    width: 932px;
}

结果：

Answer 1

更改您的标记。

对每一行使用一个 li，对行中的每一列使用一个 div。

<ul>
    <li class="clearfix">
        <div>
            <label>Field1</label>
            <input type="text">
        </div>
        <div>
            <label>Field1</label>
            <input type="text">
        </div>
    </li>
</ul>

然后，您可以浮动您的 div，并将它们设为 50% 以获得两列。然后，您需要对您的 li 应用 clearfix 以强制它们包装 div