css运用负m◎argin完成均值合理布局的实例

针对均值遍布的合理布局，大家一般应用负margin的方式。以下图，便是均值合理布局。

一般这类状况，大家全是在父原素和子原素中间再加一层div，随后，给这一div设定负margin-right，数值2个子原素中间的间距。
比如，大家令每一个子原素总宽为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均值合理布局內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！