CSS的两端对齐和间距相同都是常用的样式处理方式。下面我们通过pre标签来进行代码的演示。.container { display: flex; justify-content: space-betw
CSS的两端对齐和间距相同都是常用的样式处理方式。下面我们通过pre标签来进行代码的演示。
.container { display: flex; justify-content: space-between; align-items: center; } .item { flex-basis: calc(50% - 10px); }
上述代码中,我们采用了Flex布局,通过justify-content: space-between;和align-items: center;将子元素对齐到父元素的两端和中央位置,实现两端对齐和间距相同的效果。同时,为了避免子元素撑开容器造成间距变大,我们使用了flex-basis: calc(50% - 10px);计算每个子元素的宽度。
除此之外,我们还可以使用text-align和margin来进行两端对齐和间距相同的实现:
.container { text-align: justify; } .item { display: inline-block; width: 50%; margin-right: 10px; } .item:last-of-type { margin-right: 0; }
在上述代码中,我们给父元素container设置了text-align: justify;以实现两端对齐的效果。然后,我们将子元素item设置为inline-block,宽度为50%,并为每个子元素设置右边距为10px,最后将最后一个子元素的右边距设置为0,以实现间距相同的效果。
粉丝
0
关注
0
收藏
0