CSSでdtとddを横並びにする方法。ddが複数行でも対応させるために

自分でコードを書いていると dl 定義リストを使ってdtとddを横並びにしたい時が多々あります。
備忘録としてブログを書いておきます。

<dl>
  <dt>メーカー</dt>
    <dd>Kanon</dd>
  <dt>商品名</dt>
    <dd>Xos ...</dd>
  <dt>タイプ</dt>
    <dd>一眼レフデジタルカメラ</dd>
  <dt>メモリーカードタイプ</dt>
    <dd>SDXCカード</dd>
  <dt>有効画素数</dt>
    <dd>2000万画素</dd>

............
............
............
</dl>

こんな感じのやつですね。

PCサイト専用で横幅が決まっている上に文字数も決まっていて複数行にならない場合は、dt に width を指定して float するだけでOKだったりしますが、レスポンシブだったりリキッドレイアウトをしている場合、それだけでは対応できないケースの方が多いです。

うまくいかないケース

width 500px なら問題ない

width 200px だと崩れる

ここまでコードはこんな感じ

html

<!-- 幅が500pxの場合 -->
<div class="sampleWrap">
<dl class="one-low w500">
  <dt>メーカー</dt>
    <dd>Kanon</dd>
  <dt>商品名</dt>
    <dd>Xos ...</dd>
  <dt>タイプ</dt>
    <dd>一眼レフデジタルカメラ</dd>
  <dt>メモリーカードタイプ</dt>
    <dd>SDXCカード</dd>
  <dt>有効画素数</dt>
    <dd>2000万画素</dd>
</dl>
</div>

<!-- 幅が200pxの場合 -->
<div class="sampleWrap">
<dl class="one-low w200">
  <dt>メーカー</dt>
    <dd>Kanon</dd>
  <dt>商品名</dt>
    <dd>Xos ...</dd>
  <dt>タイプ</dt>
    <dd>一眼レフデジタルカメラ</dd>
  <dt>メモリーカードタイプ</dt>
    <dd>SDXCカード</dd>
  <dt>有効画素数</dt>
    <dd>2000万画素</dd>
</dl>
</div>

css

.sampleWrap dl {
  border: 1px solid #ccc;
  background: #eee;
}

.sampleWrap dl::after {
  content: "";
  clear: both;
  display: block;
}

.sampleWrap .w500 {
  width: 500px;
}

.sampleWrap .w200 {
  width: 200px;
}


.sampleWrap .one-low dt,
.sampleWrap .one-low dd {
  border-top: 1px solid #FFF;
  padding: 0.5em 0;
}
.sampleWrap .one-low dt {
  float: left;
  width: 50%;
}

htmlはそのままcssだけで対応できるようにしたいのでちょっと調整します。

書き換えた結果

width 500px はもちろん

width 200px でも崩れない

html

<!-- 上記と比べclassだけ書き換えています -->
<div class="sampleWrap">
<dl class="two-low w500">

css

.sampleWrap .two-low dt,
.sampleWrap .two-low dd {
  display: block;
  border-top: 1px solid #FFF;
  padding: 0.5em 0;
}

.sampleWrap .two-low dt {
  float: left;
  clear: left;
  width: 50%;
}

.sampleWrap .two-low dd {
  float: left;
  width: 50%;
}

dt に　clear を掛けておかないと、ddが無かったり1行の時にズレます。
また border は dt dd の bottom に設定するとズレるので top に設定しています。
floatを使っているので親要素である dl にclearfixを忘れずに。
結構様々なケースに対応可能かと思います。

参考にさせていただきました。
【CSS】dtとddを横並びにして複数行でもズレないようにする
ありがとうございます。

 - css