1

当包含的文本多于一行时，我试图避免在 DL 中下推左浮动 DD。

此处示例：http: //jsfiddle.net/hw2wM/7/ 前两个 DD 对齐。然而，第三个应该与前两个 DD 保持对齐，而是被向下推并占据整个宽度......

我想保留的功能：

  • 当 DT 文本太宽时，DD 被优雅地推到右边。
  • 无固定宽度
  • 与空 DD 保持一致
  • 两个 DL 并排显示
4

2 回答 2

3

这是您演示的修改版本：little link。两个变化：

  • float: left;在dds 更改为overflow: hidden;
  • 添加：dd:nth-of-type(n+2) { margin-top: 10px; }
于 2012-10-05T10:28:58.747 回答
1

最终答案，希望它可以节省某人的时间...

最灵活的答案。 http://jsfiddle.net/SeYzF/1/

感谢@Abody97 展示了领先优势。

主要特点，在 Abody97 建议之上：

dd:after {content:' '; white-space:pre;}

如果为空，则保持 dd 不对齐

div.table { 显示：表格；宽度：100%；} div.table > * { 显示：表格单元格；}

并排显示两个 DL

于 2012-10-08T09:56:45.113 回答