4

用語と定義の両方の幅が異なる定義リストがあります。[編集：明確にするために、私がさまざまな幅を言うとき、私はそれらが固定幅であってはならないことを意味します。明らかに、この効果は `'の幅を設定することで簡単に達成できます]各ペアを並べて配置する必要があり、必要に応じて、の下に折り返すことなく複数行になります。

これが私の問題を示すJSFiddleです：http：//jsfiddle.net/2H9YN/ （以下のコード）

[編集：色は参照用であることに注意してください。それらは最終的な設計にとって重要ではありません]

私は現在これを持っています：

ここに画像の説明を入力してください

しかし、私はこれが欲しい：

ここに画像の説明を入力してください

HTML：

<dl>
    <dt>dt: Lorem Ipsum</dt>
    <dd>dd: Lorem imperdiet </dd>
    <dt>dt: Lorem id libero in Ipsum</dt>
    <dd>dd: Lorem id libero in ipsum dolor </dd>
    <dt>dt: Lorem Ipsum</dt>
    <dd>dd: I should be sitting to the right of the previous dt and not wrapping round below it.</dd>
    <dt>dt: Lorem id libero in Ipsum</dt>
    <dd>dd: Lorem in ipsum dolor </dd>
</dl>

CSS：

dl
{
    width:400px;
    background-color: rgba(0, 0, 0, 0.2);
    float: left;
}

dt
{
    clear:both;
    float:left;
    background-color: rgba(255, 0, 0, 0.3);
}

dd
{
    float:left;
    background-color: rgba(0, 255, 0, 0.3);
    margin: 0 0 0 4px;
}

<dd>基本的に、によって残されたスペースを埋めるためにを探しています。<dt>これがラップする必要がある場合は、隣接するの下ではなく、それ自体の下にラップします<dt>。

4

2 に答える 2

3

動作する可能性のあるCSSは次のとおりです。

dl {
    width: 400px;
    background-color: rgba(0, 0, 0, 0.2);
    overflow: auto;
}

dt {
    background-color: rgba(255, 0, 0, 0.3);
    float: left;
    clear: left;
    margin-right: 10px; /* Margin work */
    padding: 5px; /* Padding works */
}
dd {
    background-color: rgba(0, 255, 0, 0.3);
    display: table-cell;
    padding-left: 10px; /* Padding works */
    padding-bottom: 10px;
    margin-left: 100px; /* Margin does not work */
    margin-bottom: 100px;
}

フィドルリファレンス： http： //jsfiddle.net/audetwebdesign/45jDK/

それが機能する理由の説明

（1）背景色を確認するには、に設定overflow: autoしdlます。すべての子要素がフロートしているため、デフォルトでは高さはゼロに折りたたまれます。

dt（2）新しい行から始めたいので、短い要素の後に流れないclear: leftように使用します。dtdd

（3）の場合dd、使用display: table-cellするとうまくいくようです。

dtで、期待どおりpaddingにmargin動作します。でdd、はpadding機能しますがmargin、効果はありません。おそらく、どのように機能するかが原因ですtable-cell。

私はこれをFirefoxで試しましたが、他の場所では試しませんでした。

PS極端な状況がどのようにレンダリングされるかを確認するため
に、要素の1つにいくつかのコンテンツを追加しました。dtの実験も行いましたwidthがdl、レイアウトは安定しています。

于 2013-03-16T12:39:37.983 に答える
2

定義リストを使用しているという事実は、これを実行するのが非常に難しいことです。dtとddの関係を強制するための何らかのコンテナがない場合は、どこかに制限を設定する必要があります。

マークアップで取得できる最も近いものはOperaで動作しますが、Flexboxの実装の違いによりChromeでは動作しません。

http://jsfiddle.net/2H9YN/4/

dl {
  width: 400px;
  background-color: rgba(0, 0, 0, 0.2);
  float: left;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-flex-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

dt {
  background-color: rgba(255, 0, 0, 0.3);
  -webkit-flex: 0 0;
  -ms-flex: 0 0;
  flex: 0 0;
  white-space: pre;
}

dd {
  background-color: rgba(0, 255, 0, 0.3);
  margin: 0 0 0 4px;
  -webkit-flex: 1 1 50%;
  -ms-flex: 1 1 50%;
  flex: 1 1 50%;
}

そしてもちろん、dtあたり1ddを超えない場合にのみ機能します。

ある種の行コンテナを持つようにマークアップを変更したい場合は、より多くのオプションがあります。テーブルである必要はなく、h1（dt）と段落（dd）を含む一連の記事にすることができます。タグは重要ではなく、要素がどのようにグループ化されているかだけです。

<table>
    <tr>
        <th>dt: Lorem Ipsum</th>
        <td>dd: Lorem imperdiet </td>
    </tr>

    <tr>
        <th>dt: Lorem id libero in Ipsum</th>
        <td>dd: Lorem id libero in ipsum dolor </td>
    </tr>

    <tr>
        <th>dt: Lorem Ipsum</th>
        <td>dd: I should be sitting to the right of the previous dt and not wrapping round below it.</td>
    </tr>
</table>

再びFlexboxを使用すると、要素に最後まで到達するのに十分なコンテンツがない場合に、灰色の背景を突き抜けるまで完全に一致させることができます。また、Flexbox以外のブラウザの合理的なフォールバックを取得することもできます。

http://jsfiddle.net/2H9YN/7/

table {
  width: 400px;
  background-color: rgba(0, 0, 0, 0.2);
}

table, tbody, th, td {
  display: block;
}

tr {
  display: block;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

th, td {
  display: table-cell;
  vertical-align: text-top;
}

th {
  background-color: rgba(255, 0, 0, 0.3);
  white-space: pre;
  font-weight: normal;
}

td {
  background-color: rgba(0, 255, 0, 0.3);
  margin: 0 0 0 4px;
}
于 2013-03-16T14:29:56.083 に答える