摘要:实现原理红色的个左浮动,左右为,父容器左右为,这样相当于是把父容器拉长了,因此就达到了两端对齐的效果。的栅格系统就是这么干的,要求我们的父容器需要为,而的左右就为。
两端对齐效果
如上图中红色的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元素
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/113892.html
摘要:实现原理红色的个左浮动,左右为,父容器左右为,这样相当于是把父容器拉长了,因此就达到了两端对齐的效果。的栅格系统就是这么干的,要求我们的父容器需要为,而的左右就为。 两端对齐效果 showImg(https://segmentfault.com/img/bVbgswx?w=1303&h=523); 如上图中红色的9个div它们中间有间距,而最左边和最右边是没有间距的,这种布局如果使用c...
摘要:实现基于纯实现的三栏布局需要将中间的内容放在结构的最后,否则右侧会沉在中间内容的下侧原理元素浮动后,脱离文档流,后面的元素受浮动影响,设置受影响元素的值即可两边固定宽度,中间宽度自适应。 1 float实现 基于纯float实现的三栏布局需要将中间的内容放在HTML结构的最后,否则右侧会沉在中间内容的下侧 原理:元素浮动后,脱离文档流,后面的元素受浮动影响,设置受影响元素的margi...
阅读 2312·2021-11-16 11:44
阅读 775·2021-09-10 11:16
阅读 2183·2019-08-30 15:54
阅读 892·2019-08-30 15:53
阅读 1840·2019-08-30 13:00
阅读 565·2019-08-29 17:07
阅读 3468·2019-08-29 16:39
阅读 3093·2019-08-29 13:30