gpt4 book ai didi

html - CSS 用 flexbox 对齐两侧的几个元素

转载 作者:搜寻专家 更新时间:2023-10-31 19:29:12 25 4
gpt4 key购买 nike

<分区>

我正在尝试使用 css flexbox 在两侧做一些元素,但不知何故我无法将它们 (div) 并排放置。

PS:我不能设置元素的数量,因为我希望它是灵活的,因为我可以添加或删除并且它不会影响我的 css。

I want it to be like this. Sample of picture:

我已经试过了。但是从输出结果可以看出,左边的div之间有空隙。

.bottom{
position:fixed;
bottom:0;
}
.wrapper {
width: 500px;
border: solid 1px #000;
display: flex;
justify-content: flex-end;
}
.item-left {
width: 20%;
border: solid 1px #000;
margin-right:auto;
}
.item-right {
width: 20%;
border: solid 1px #000;
height: 200px;
}
<div id="bottom" class="bottom">
<div class="wrapper">
<a class="item item-left">
<div class="item-label">Label</div>
</a>
<a class="item item-left">
<div class="item-label">Label</div>
</a>
<a class="item item-right">
<div class="item-label">Label</div>
</a>
<a class="item item-right">
<div class="item-label">Label</div>
</a>
</div>
</div>
Here is the jsFiddle

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