浮动这些元素的正确方法是什么

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>

，我需要浮动它，以便它看起来像这样（注意 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;
}

设置边距等

Answer 2

• 更新 - 看到您无法编辑 html，请查看此仅 css 解决方案： http://jsfiddle .net/SebastianPataneMasuelli/csXPG/4/

它包含 dl 标签，需要为布局设置宽度才能工作

css 浮动是 css 最令人困惑的概念之一（我教这些东西，它的最难向学生解释的事情之一）。但我向你保证，一旦你了解了 CSS，你就再也不想编写表格了，除了表格数据，表格对于表格来说非常棒。

Answer 3

您必须使用

和

标签吗？如果您要使用它们，您应该用

标签将它们全部包围起来，但是由于您希望文本框与标签并排而不是在它们下方缩进，因此将两者（您的标签和输入）包围在 div 中不是更容易吗？这将为您提供您正在寻找的布局。

Answer 4

像这样的某种令人厌恶的东西可能会起作用，但它非常脆弱，各种宽度和高度是使用“摆弄它直到它起作用”技术确定的：

#dt0 {
    display: none;
}

#dd0 {
    height: 100px;
}

#dd0dd {
    float: left;
}

#dt1, #dt2, #dt3, #dt4{ 
    float: left; 
    clear: right;
    width: 80px; 
    margin-left: 100px;
}

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

这适用于 Safari 中的 jsfiddle.net，其他任何地方的 YMMV。我现在感觉很脏。

Answer 5

让 无表格 CSS 见鬼去吧，如果你只是把它全部放在一个表，然后您也不必应对浏览器的不一致问题。

我们甚至还有一些盟友：

• http://giveupandusetables.com/
• http://giveupandusetables.com/ barrypearson.co.uk/articles/layout_tables/defence.htm" rel="nofollow">http://www.barrypearson.co.uk/articles/layout_tables/defence.htm

这是一个即兴解决方案：

<table>
  <tr><td rowspan=3>
    <dt id="dt0">                                      </dt>
    <dd id="dd0dd">  <textarea id="dd0"></textarea>         </dd>
  </td></tr>
  <tr style='display:none'><td>
    <dt id="dt1">                                      </dt>
    <dd id="dd1dd">  <input id="dd1" type="hidden">         </dd>
  </td></tr>
  <tr><td>
    <dt id="dt2">    <label for="dd2">Dd2 Label:</label>    </dt>
    <dd id="dd2dd">  <input id="dd2" type="text">           </dd>
  </td></tr>
  <tr><td>
    <dt id="dt3">    <label for="dd3">Dd3 Label:</label>    </dt>
    <dd id="dd3dd">  <input id="dd3" type="text">           </dd>
  </td></tr>
  <tr><td>
    <dt id="dt4">    <label for="dd4">Dd4 Label:</label>    </dt>
    <dd id="dd4dd">  <input id="dd4" type="text">           </dd>
  </td></tr>
</table>