css - float 这些元素的正确方法是什么

Question

我有这个标记

<dt id="dt0">    &nbsp;                                 </dt>
<dd id="dd0dd">  <textarea id="dd0"></textarea>         </dd>

<dt id="dt1">    &nbsp;                                 </dt>
<dd id="dd1dd">  <input id="dd1" type="hidden">         </dd>

<dt id="dt2">    <label for="dd2">Dd2 Label:</label>    </dt>
<dd id="dd2dd">  <input id="dd2" type="text">           </dd>

<dt id="dt3">    <label for="dd3">Dd3 Label:</label>    </dt>
<dd id="dd3dd">  <input id="dd3" type="text">           </dd>

<dt id="dt4">    <label for="dd4">Dd4 Label:</label>    </dt>
<dd id="dd4dd">  <input id="dd4" type="text">           </dd>

我需要将它 float 以便它看起来像这样(注意 dd1 是一个隐藏元素)

_________________________________                ________________________
|                               |     Dd2 Label  |                       |
|                               |                |_______________________|
|                               |     
|                               |                ________________________
|                               |     Dd3 Label  |                       |
|                               |                |_______________________|
|                               |
|                               |                ________________________
|                               |     Dd4 Label  |                       |
|_______________________________|                |_______________________|

CSS 不是我真正喜欢的东西，但我已经尝试了一大堆东西并得到了一些工作，但它看起来仍然不正确。这是我现在拥有的 CSS。

#dd0dd {
    float:left;
}
#dt1, #dt2, #dt3, #dt4{ 
    float:left; 
    clear:right; 
    width:80px; 
}
#dd1dd, #dd2dd, #dd3dd, #dd4dd {
    float:right;
    clear:right;
}

谁能告诉我如何改进此 CSS 以使其看起来正确。

编辑:我希望我可以更改标记以使用表格或不使用表格，但它是自动生成的，无法更改。

Answer 1

#dt1,
#dt0 {
    display: none;
}

#dd0dd {
    float:left;
}

#dt1, #dt2, #dt3, #dt4{ 
    float:left; 
    width:80px; 
}

#dd1dd, #dd2dd, #dd3dd, #dd4dd {
    clear:right;
}

设置边距等