自動幅のセマンティックhtml水平定義リストの作成方法は？ HTMLで

Question

セマンティックインライン定義リスト：

<dl> 
 
    <dt>Item 1</dt> 
 
    <dd>def. 1</dd> 
 
    <dt>Item 2</dt> 
 
    <dd>def. 2</dd> 
 
</dl>

どのようにのみ、CSS（なしJS）と自動幅各列を使用して2列にこれをレンダリングするには？

固定幅またはパーセント幅を使用するのは簡単ですが、自動幅の解決策は見つかりませんでした。

（私はフレックスボックスとマルチカラムを試しました）

ご存知ですか？

おかげ

Answer 1

は、だから私はflexboxを使用して解決策を持っていますが、私はあなたの半分の幅を指定せずに多くを行うことができるとは思いません。ノート

*{ 
 
    box-sizing: border-box; 
 
} 
 
dl { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
dl dt, 
 
dl dd { 
 
    width: 50%; 
 
    margin: 0; 
 
    border: 1px solid red; 
 
}

<dl> 
 
    <dt>Item 1</dt> 
 
    <dd>def. 1</dd> 
 
    <dt>Item 2</dt> 
 
    <dd>def. 2</dd> 
 
</dl>

：

1. は、私は、画面の幅の半分の各要素とのレイアウトを実現するためにフレックスラップを使用しています。

2. ddには、margin: 0を使用してリセットする必要があるデフォルトのマージン値があります。

私はこれに関するあなたのフィードバックをお知らせください。ありがとう！

EDIT：あなたは複数のdd秒を持っている場合は

は、その後、あなたはこれを使用することができます。

*{ 
 
    box-sizing: border-box; 
 
} 
 
dl { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
dl dt, 
 
dl dd { 
 
    width: 50%; 
 
    margin: 0; 
 
    border: 1px solid red; 
 
} 
 

 
dl dt ~ dd + dd { 
 
    margin-left: 50%; 
 
}

<dl> 
 
    <dt>Item 1</dt> 
 
    <dd>def. 1</dd> 
 
    <dd>def. 1</dd> 
 
    <dd>def. 1</dd> 
 
    <dt>Item 2</dt> 
 
    <dd>def. 2</dd> 
 
    <dd>def. 2</dd> 
 
</dl>

Answer 2

致命的なシンプルなソリューション（意味、完全に作業を、なしjavascript）：

dl.horizontal-definition-list { 
 
    display: table; 
 
    min-width: 400px; 
 
} 
 

 
.horizontal-definition-list dt, .horizontal-definition-list dd { 
 
    padding: 2% 10%; 
 
} 
 

 
.horizontal-definition-list dt { 
 
    display: table-cell; 
 
    text-align: right; 
 
    white-space: nowrap; 
 
    font-weight: 600; 
 
    background: gold; 
 
} 
 

 
.horizontal-definition-list dd { 
 
    display: table-cell; 
 
    background: silver; 
 
} 
 

 
.horizontal-definition-list dd.line-break { 
 
    display: table-row; 
 
}

<dl class="horizontal-definition-list"> 
 
    <dt>Term 1</dt> 
 
    <dd>definition 1</dd> 
 
    <dd class="line-break"></dd> 
 
    <dt>Term 2</dt> 
 
    <dd>definition 2</dd> 
 
    <dd class="line-break"></dd> 
 
    <dt>Term 3</dt> 
 
    <dd>definition 3<br>(multiline, no problem)</dd> 
 
    <dd class="line-break"></dd> 
 
    <dt>Term 4</dt> 
 
    <dd class="red-text">definition 4</dd> 
 
</dl>