C语言学习网

怎么用css使既有浮动又有左右margin的多个元素两端对其

发表于:2022-12-09 作者:安全数据网编辑
编辑最后更新 2022年12月09日,小编给大家分享一下怎么用css使既有浮动又有左右margin的多个元素两端对其,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!两端对齐效果如上图中红色的9个div它们中间有间距,而最左

小编给大家分享一下怎么用css使既有浮动又有左右margin的多个元素两端对其,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

两端对齐效果

如上图中红色的9个div它们中间有间距,而最左边和最右边是没有间距的,这种布局如果使用css3的flex来实现是非常简单的,而如果要使用float布局就需要一些特殊的技巧了。

实现原理

红色的9个div左浮动,左右margin为25px,父容器左右margin为-25px,这样相当于是把父容器拉长了,因此就达到了两端对齐的效果。Bootstrap的栅格系统就是这么干的,bootstrap要求我们.col-xx-xx的父容器需要为.row,而.row的左右padding就为-15px。

示例代码

下面的元素会与我对齐
我是第1个div元素
我是第2个div元素
我是第3个div元素
我是第1个div元素
我是第2个div元素
我是第3个div元素

看完了这篇文章,相信你对"怎么用css使既有浮动又有左右margin的多个元素两端对其"有了一定的了解,如果想了解更多相关知识,欢迎关注行业资讯频道,感谢各位的阅读!

0