1

1行に収まらないほど多くのテキストが含まれている場合、DL内の左フローティングDDのプッシュダウンを回避しようとしています。

ここでの例：http： //jsfiddle.net/hw2wM/7/2 つの最初のDDが整列されています。ただし、3番目のものは最初の2つのDDと位置合わせされたままである必要がありますが、代わりに押し下げられ、幅全体を取ります...

残しておきたい機能：

  • DTテキストが広すぎる場合、DDは適切に右にプッシュされます。
  • 固定幅なし
  • 空のDDとの位置合わせを維持
  • 2つのDLが並べて表示されます
4

2 に答える 2

3

デモの修正版は次のとおりです: little link。2 つの変更:

  • float: left;にdd変更されました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 > * { display: table-cell; }

2 つの DL を並べて表示するには

于 2012-10-08T09:56:45.113 に答える