css怎么利用负margin技术实现平均布局-创新互联

这篇文章给大家分享的是有关css怎么利用负margin技术实现平均布局的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

企业建站必须是能够以充分展现企业形象为主要目的，是企业文化与产品对外扩展宣传的重要窗口，一个合格的网站不仅仅能为公司带来巨大的互联网上的收集和信息发布平台，创新互联建站面向各种领域：橡塑保温等成都网站设计、网络营销推广解决方案、网站设计等建站排名服务。

我们平常会利用float布局来解决IE浏览器CSS的兼容性问题，比如淘宝，就是用float布局来实现的。我们会在淘宝页面会看到下图这样一种布局。

css怎么利用负margin技术实现平均布局

这种图片均匀分布的布局我们叫平均布局，那这种布局又是怎么实现的呢？有的同学可能觉得，这还不简单，可以直接设置父元素div宽度和子元素宽度总和相等就可以了。真的有这么容易吗，我们来试一下。

测试

假如我们令每个子元素宽度为100px，一共3个子元素，给每个子元素一个margin-right，设为50px，那父元素宽度应为100x3+50x2=400px。我们设置一些样式。html和css代码如下。

//HTML

//CSS * { margin: 0; padding: 0; box-sizing: border-box; } .clearfix::after { content: ''; display: block; clear: both; } .father { width: 400px; height: 100px; margin: 10px; background-color: #d5a4cf; border: 1px solid black; } .son { border: 1px solid black; background-color: #fff1ac; float: left; margin-right: 50px; width: 100px; height: 100px; }

//CSS * { margin: 0; padding: 0; box-sizing: border-box; } .clearfix::after { content: ''; display: block; clear: both; } .father { width: 400px; height: 100px; margin: 10px; background-color: #d5a4cf; outline: 1px solid black; } .son { border: 1px solid black; background-color: #fff1ac; float: left; margin-right: 50px; width: 100px; height: 100px; } .middle { margin-right: -50px; }

大橙子网站建设，新征程启航

css怎么利用负margin技术实现平均布局-创新互联

其他资讯