我是flexbox的新手,我一直在尝试使描述列表成对对齐,就像在表中一样,它们成对堆叠。
我尝试了一些flexbox技术,但没有任何效果
这是标记
<div class="ad-overview">
<h3>Overview</h3>
<dl>
<dt>Mileage(KM)</dt>
<dd>4300</dd>
<dt>Condition</dt>
<dd>Locally used</dd>
<dt>Body Type</dt>
<dd>4 wheel drives & Suvs</dd>
<dt>Colour</dt>
<dd>Black</dd>
<dt>Fuel</dt>
<dd>Diesel</dd>
<dt>Transmission</dt>
<dd>Automatic</dd>
<dt>Duty Type</dt>
<dd>Paid</dd>
<dt>Interior</dt>
<dd>Leather</dd>
<dt>Engine size</dt>
<dd>2993</dd>
<dt>Year</dt>
<dd>2012</dd>
</dl>
</div>
这是我的CSS
.ad-overview,
dl {
display: flex;
}
dl {
flex-wrap: wrap;
}
dt {
font-weight: bold;
}
dt+dd {
display: flex;
}
这是我正在尝试实现的布局样式。一些帮助将不胜感激
最佳答案
解决问题的方法很多,最简单的方法是将每对td和dd放在一个块中,然后将该块设置为带有flex-direction:column
的flexbox,还必须添加包装以使其看起来堆叠,这是主要思想,那么您将需要对代码的空白处进行一些修改,例如,块的宽度等等,这些都取决于您,以下代码将向您显示解决方案:
.ad-overview,
dl {
display: flex;
flex-direction:row;
justify-content: space-between;
flex-wrap: wrap;
}
.col{
display:flex;
flex-direction:column;
text-align:left;
width: 30%;
margin-bottom: 3%;
}
dt {
font-weight: bold;
}
dd{
margin-left:0px;
width: 100%;
}
<div class="ad-overview">
<h3>Overview</h3>
<dl>
<div class="col">
<dt>Mileage(KM)</dt>
<dd>4300</dd>
</div>
<div class="col">
<dt>Condition</dt>
<dd>Locally used</dd>
</div>
<div class="col">
<dt>Body Type</dt>
<dd>4 wheel drives & Suvs</dd>
</div>
<div class="col">
<dt>Colour</dt>
<dd>Black</dd>
</div>
<div class="col">
<dt>Fuel</dt>
<dd>Diesel</dd>
</div>
<div class="col">
<dt>Transmission</dt>
<dd>Automatic</dd>
</div>
<div class="col">
<dt>Duty Type</dt>
<dd>Paid</dd>
</div>
<div class="col">
<dt>Interior</dt>
<dd>Leather</dd>
</div>
<div class="col">
<dt>Engine size</dt>
<dd>2993</dd>
</div>
<div class="col">
<dt>Year</dt>
<dd>2012</dd>
</div>
</dl>
</div>
关于html - 如何使描述列表与Flexbox成对对齐,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56209678/