当前位置: 移动技术网 > IT编程>网页制作>CSS > css利用负margin实现平均布局的示例

css利用负margin实现平均布局的示例

2020年11月03日  | 移动技术网IT编程  | 我要评论
对于平均分布的布局,我们一般使用负margin的方法。如下图,就是平均布局。一般这种情况,我们都是在父元素和子元素之间加上一层div,然后,给这个div设置负margin-right,值为两个子元素之

对于平均分布的布局,我们一般使用负margin的方法。如下图,就是平均布局。

一般这种情况,我们都是在父元素和子元素之间加上一层div,然后,给这个div设置负margin-right,值为两个子元素之间的距离。
例如,我们令每个子元素宽度为100px,一共3个子元素,给每个子元素一个margin-right,设为50px,那父元素宽度应为100x3+50x2=400px。上代码:

//html
<div class="father">
    <div  class="middle">
        <div  class="son1"></div>
        <div  class="son2"></div>
        <div  class="son3"></div>
    </div>
</div>
//css
.son1,.son2,son3{
    margin-right:50px;
    width:100px;
}
.father{
    width:400px;
}
.middle{
    margin-right:-50px;
}

中间层margin-right:-50px相当于向右“延伸”了50px,使得son3元素有空间和其他元素在一行。

到此这篇关于css利用负margin实现平均布局的示例的文章就介绍到这了,更多相关css 负margin平均布局内容请搜索移动技术网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持移动技术网!

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网