对于平均分布的布局,我们一般使用负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元素有空间和其他元素在一行。

标签:
css,负margin,平均布局

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“css利用负margin实现平均布局的示例”

暂无“css利用负margin实现平均布局的示例”评论...

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。