css - 有什么方法可以得到只有两个元素的简单两列布局？

Question

我的意思是这样的:

definition | content......................
definition | content......................
definition | content......................
definition | content......................

定义列具有固定宽度，内容列填充剩余宽度。

我知道如何用 3 个容器元素制作它，但只用两个是否可能？

例如使用这个标记:

<dl>

  <dt> definition </dt>
  <dd> content </dd>

  <dt> definition </dt>
  <dd> content </dd>

  <dt> definition </dt>
  <dd> content </dd>

  ..............
</dl>

我试过:

dt{
  float:left;
  width: 200px;
}

dd{
  overflow:hidden;
}

但是如果定义栏高于内容栏，它会弄乱整个布局:(

http://jsfiddle.net/LseGH/

Answer 1

您需要同时 float dt 和 dd 元素，但要清除 dt float 在前一个 dd 旁边。我更新为添加列，分别为 30% 和 70% 宽度，根据需要进行更改。像这样:

dt {
    clear: both; /* clears the previous floating dd element */
    float: left;
    width:30%;
}

dd {
    margin-left: 0; /* this is important to reset the margin & add the widths to 100% */
    float: left;
    width:70%;
}

Example JS Fiddle Here