ミギムキ

[CSS] 2つの要素を横に並べて高さをそろえた見出し付きボックス

2つの要素を横に並べて高さをそろえた見出し付きボックス

サンプルコード

html

<ul class="box_compare"> <li> <dl> <dt>見出し</dt> <dd>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</dd> </dl> </li> <li> <dl> <dt>見出し</dt> <dd>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</dd> </dl> </li> </ul>
スポンサー広告

CSS

.box_compare, .box_compare > li > dl > dt, .box_compare > li > dl > dd { box-sizing: border-box; } .box_compare { padding: 0px; list-style: none; } .box_compare > li > dl { margin: 0px; height: 100%; border: 1px solid #3388dd; } .box_compare > li > dl > dt { padding: 1em; border-bottom: 1px solid #3388dd; background-color: #3388dd; color: #fff; font-weight: bold; text-align: center; } .box_compare > li > dl > dd { padding: 1em; margin: 0px; } @media screen and (max-width: 767px) { .box_compare > li + li { margin: 30px 0px 0px; } } @media print, (min-width: 768px) { .box_compare { display: flex; justify-content: space-between; } .box_compare > li { width: calc(50% - 15px); } }
スポンサー広告