gpt4 book ai didi

html - 如何在 Flexbox 布局中实现列表元素的自动换行

转载 作者:行者123 更新时间:2023-11-28 14:45:23 31 4
gpt4 key购买 nike

以下是根据我的问题的元素目前的样子: Flexbox Layout

我想要实现的是,如果无序列表元素内的文本太长,则换行到下一行。现在发生的是,整个列表跳入一个新行(参见链接图像中的第二个示例)。

我希望列表紧挨着同一行的图像(直到达到某些媒体查询以使用 flex-direction: column 中断)。

有什么可能的解决方案吗?

.team-row {
display: -webkit-flex;
/* Safari */
-webkit-flex-flow: row wrap;
/* Safari 6.1+ */
display: flex;
flex-flow: row wrap;
margin-top: 1em;
border: 1px solid #efefef;
padding: 5px;
}

.team-header {
padding: 8px;
background-color: #F6B80B;
width: 100%;
}
<div class="team-row">
<strong class="team-header">Wolfgang Niepel</strong>
<img class="team-image" src="http://wp.fahrschuleniepel.de/wp-content/uploads/2018/09/image.png" alt="Wolfgang Niepel" width="100" height="133">
<ul class="team-description">
<li>Fahrlehrer seit: 1964</li>
<li>selbstständig seit: 1968</li>
<li>sonstiges: Gründung der Fahrschule Niepel am 01.12.1968.</li>
</ul>
</div>

<div class="team-row">
<strong class="team-header">Jens Niepel</strong>
<img class="team-image" src="http://wp.fahrschuleniepel.de/wp-content/uploads/2018/09/jens_niepel_100.jpg" alt="Jens Niepel" width="100" height="133">
<ul class="team-description">
<li>Fahrlehrer seit: 1983</li>
<li>bei Fahrschule Niepel seit: 1983</li>
<li>sonstiges: Seit 2001 leite ich unser Büro und bin Ihr Ansprechpartner zu allen Fragen rund um Ihre Ausbildung.</li>
</ul>
</div>

最佳答案

flex: 1; 添加到 .team-description

这将设置:

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

关于html - 如何在 Flexbox 布局中实现列表元素的自动换行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52355871/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com