资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/css使既有浮动又有左右margin的多个元素两端对其

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

zhiwei / 1466人阅读

摘要：实现原理红色的个左浮动，左右为，父容器左右为，这样相当于是把父容器拉长了，因此就达到了两端对齐的效果。的栅格系统就是这么干的，要求我们的父容器需要为，而的左右就为。

两端对齐效果

如上图中红色的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元素
GPU云服务器 云服务器 html两端对其 左右浮动 元素浮动 html居中浮动元素

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54600.html

相关文章

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

    摘要：实现原理红色的个左浮动，左右为，父容器左右为，这样相当于是把父容器拉长了，因此就达到了两端对齐的效果。的栅格系统就是这么干的，要求我们的父容器需要为，而的左右就为。 两端对齐效果 showImg(https://segmentfault.com/img/bVbgswx?w=1303&h=523); 如上图中红色的9个div它们中间有间距，而最左边和最右边是没有间距的，这种布局如果使用c...

    Galence 评论0 收藏0

  • margin详解

    摘要：属性指定了盒的区的宽度。简写属性一次性设置四周的，而其它属性只设置它们各侧的。 margin属性指定了盒的margin区的宽度。margin简写属性一次性设置四周的margin，而其它margin属性只设置它们各侧的。这些属性适用于所有元素，但非替换行内元素上的竖直margin将不会产生任何效果 margin与容器尺寸 margin与可视尺寸 margin与可视尺寸 只适用于没有设定...

    stonezhu 评论0 收藏0

  • CSS || 三栏布局，两边固定，中间自适应

    摘要：实现基于纯实现的三栏布局需要将中间的内容放在结构的最后，否则右侧会沉在中间内容的下侧原理元素浮动后，脱离文档流，后面的元素受浮动影响，设置受影响元素的值即可两边固定宽度，中间宽度自适应。 1 float实现 基于纯float实现的三栏布局需要将中间的内容放在HTML结构的最后，否则右侧会沉在中间内容的下侧 原理：元素浮动后，脱离文档流，后面的元素受浮动影响，设置受影响元素的margi...

    pcChao 评论0 收藏0

  • 前端

    摘要：在每个元素后面插入蓝色的选择器选择器向选定的元素之前插入内容。具体的选择器权重计算方式如下内联样式选择器类选择器元素选择器权重计算永不进位。CSS简介 css指的是层叠样式表(Cascading Style Sheets). CSS语法 CSS语法主要由两个部分组成：选择器和声明(一条或多条声明). 选择器一般是自己需要改变样式的HTML元素；每一条声明包括属性和属性值，属性和属性值之间用...

    番茄西红柿 评论0 收藏0

发表评论

登陆后可评论

0条评论

zhiwei

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<