嗨,基本上我有 html 文本
我想知道当右列中的行将被分割到下一行时,如何换行左列并创建另一个空行,如图所示。
这里是html
<section class="karta__table">
<ul class="left__column">
<li>Etiam poseure</li>
<li>Fusce wisi</li>
<li>Bla hola tola et</li>
<li>Vie wisi</li>
</ul>
<ul class="right__column">
<li>Nulla est</li>
<li>2305</li>
<li>Rerurm trada</li>
<li>A</li>
</ul>
</section>
这是我的CSS
.karta__table{
display: flex;
justify-content: space-between;
font-size: 1.25rem;
margin-top: 20px;
}
.left__column {
font-weight: normal;
font-style: italic;
text-align: right;
flex-basis:46%;
line-height: 1.5em;
list-style: none;
}
.right__column {
text-align: left;
flex-basis: 41%;
line-height: 1.5em;
list-style: none;
display: flex;
flex-wrap: wrap;
}
我尝试使用 flex-basis 但这没有任何帮助。
您需要更新 HTML 标记:
<ul>
<li>
<span class="left"> Etiam poseure </span>
<span class="right">Nulla est</span>
</li>
<li>
<span class="left">Fusce wisi </span>
<span class="right">2305</span>
</li>
<li>
<span class="left">Bla hola tola et </span>
<span class="right">Rerurm trada</span>
</li>
<li>
<span class="left">Vie wisi </span> <span class="right">A</span>
</li>
</ul>
和CSS:
ul {
width: 200px
}
ul li {
display: flex;
}
ul li span {
flex: 1;
}
ul li span.left {
flex-basis: 50%;
display: block;
}