html - の2列の作り方IEの自動高さ調整付き？

Question

2つのli要素をグループ化する必要があります。これにより、グループ内のいずれかのli（Field7）の高さが増加すると、他のli（Field6）の高さも増加します（コンテンツではなく、ラベル、入力）。他のli要素の高さ（フィールド1、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>

私のサイトをHTML4.01標準にW3C準拠にするために、Eclipseが私に与えている警告を取り除く必要があります。さらに、私はそれを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% にして 2 つの列を取得できます。その後、li に clearfix を適用して、div を強制的にラップする必要があります。