在横向模式下,我需要在不使用边框或类似东西的情况下在两列之间分隔/制作一个间隙(大约 10-20 像素)。我尝试了一切,但仍然无法正常工作,我错过了什么?我尝试放置 margin
,但没有帮助,解决这个问题的最佳方法是什么?
@media screen and (min-width: 567px) {
.container {
display: flex;
flex-flow: row wrap;
}
.container li {
flex-basis: 50%;
max-width: 50%;
}
}
.item {
display: flex;
align-items: center;
padding-top: 5px;
}
.title {
font-weight: 500;
font-size: 22px;
padding-bottom: 18px;
}
.item-image {
flex-basis: 85px;
min-width: 85px;
padding-bottom: 30px;
}
.item .item-image img {
display: inline-block;
vertical-align: middle;
border-radius: 20px;
width: 100%;
}
.item .item-info {
border-bottom: 1px solid rgb(207, 206, 206);
padding-bottom: 20px;
flex-basis: 100%;
margin-left: 15px;
}
<ul class="container">
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
<li>
<div class="item">
<div class="item-image">
<a href="">
<img src="root-icon.png" alt="">
</a>
</div>
<div class="item-info">
<div class="item-title">Something</div>
<div class="item-subtitle">Something</div>
<div class="item-button-container">
<a class="button" href="#">GET</a>
</div>
</div>
</div>
</li>
</ul>
最佳答案
只需将类似gap: 5px
的内容添加到您的容器中,使用flex
布局
感谢@AbsoluteBeginner,并非所有地方都支持此功能。看这里:https://caniuse.com/flexbox-gap
关于css flex - 在 div 之间留出间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58249396/