dlの中にdivを入れるのは問題ありません。これを使うと、こちらのようなレイアウトを1つのdlだけで実現できます。
PCサイズでは1行ごとに左右に並び、スマホサイズでは縦1列に並ぶレイアウトです。
このレイアウトは意外と難しく、2つのdlを左右に並べてしまうと、スマホで1列にしたときに左のdlが上、右のdlが下になってしまいます。
1行ごとに折り返すのためには、1つのdlでまとめる必要があります。
ソースコードの例
HTML
<div class="clearfix">
<dl class="definition_list">
<div>
<dt>項目1</dt>
<dd>内容1</dd>
</div>
<div>
<dt>項目2</dt>
<dd>内容2</dd>
</div>
<div>
<dt>項目3</dt>
<dd>内容3</dd>
</div>
<div>
<dt>項目4</dt>
<dd>内容4</dd>
</div>
<div>
<dt>項目5</dt>
<dd>内容5</dd>
</div>
<div>
<dt>項目6</dt>
<dd>内容6</dd>
</div>
</dl><!-- /.definition_ist -->
</div>
CSS
dl.definition_list{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
text-align: left;
}
dl.definition_list div{
width: 48%;
margin: 0;
padding: 0;
}
dl.definition_list dt{
float: left;
width: 80px;
padding: 10px 0;
border-top: solid 1px #A5A5A5;
font-size: 12px;
font-weight: bold;
}
dl.definition_list dd{
float: left;
width: calc(100% - 80px);
padding: 10px 0;
border-top: solid 1px #A5A5A5;
font-size: 12px;
}
/* 768px以下 */
@media only screen and (max-width: 48em) {
dl.definition_list{
display: block;
}
dl.definition_list div{
width: 100%;
}dl.definition_list dt{
font-size: 10px;
}
dl.definition_list dd{
font-size: 10px;
}
}
/* floatがあるのでclear */
.clearfix::after {
display: block;
visibility: hidden;
clear: both;
height: 0;
content: "";
}
実際の表示
このソースを実際に表示させるとこのようになります。スマホ(横幅768px以下)では1列になります。
- 項目1
- 内容1
- 項目2
- 内容2
- 項目3
- 内容3
- 項目4
- 内容4
- 項目5
- 内容5
- 項目6
- 内容6
このような表示になります。
dtとddを横並びにするのにfloatを使っているので、全体をdivで囲い、after要素で最後にclearを入れています。
よく使うけど意外と難しい、という感じの組み方だと思いますので、ご紹介挿せていただきました。