css中如何实现平均布局？方法指什么？

发布时间：2023-07-31 14:32:34 所属栏目：语言来源：

导读：css中如何实现平均布局？在实际的项目中，我们可能会遇到实现平均布局的需求，那么这个效果怎样做呢？我们可以使用负margin的方法来实现，接下来我们一起来看一个实现示例。

一般这种情况，我们都是在父元素

css中如何实现平均布局？在实际的项目中，我们可能会遇到实现平均布局的需求，那么这个效果怎样做呢？我们可以使用负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元素有空间和其他元素在一行。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!