宽度不定,间距相同,左对齐。
这样的布局可以使用 CSS 的 flexbox
实现。以下是一种可能的实现方式:
HTML 代码:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<!-- ... -->
</div>
CSS 代码:
.container {
display: flex;
justify-content: space-between; /* 元素之间的间距 */
}
.item {
align-items: center; /* 垂直居中 */
text-align: left; /* 左对齐 */
}
在此样式中,.container
是一个 flex 容器,它的子元素 .item
是 flex 项。justify-content: space-between;
在 flex 项之间产生了相等的空间。align-items: center;
和 text-align: left;
分别使 flex 项垂直居中并左对齐文本。
注意,你可以根据需要调整这些样式。例如,如果你想改变间距,可以调整 justify-content
的值。如果你想改变对齐方式,可以调整 align-items
和 text-align
的值。
1、除了第一个元素,设置左边距:not(:first-child){margin-left: 20px;}
,或者除了最后一个元素,设置右边距:not(:last-child){margin-right: 20px;}
2、flex或grid布局使用gap属性
10 回答11.1k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
5 回答1.9k 阅读
display: flex;
flex-wrap: wrap;
gap: 10px;