我是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/

10-12 02:49
查看更多