css 布局之两端布局的实例代码（利用父级负的

建站知识 2021-07-03 07:55www.168986.cn长沙网站建设

最近在进行开发的过程中，有遇到两端对齐的布局，是按照百分比来进行布局的，之前有用过flex布局，flex布局，使用两端布局的时候，会出现一切bug。比如，狼蚁网站SEO优化的是动态生成的时候，三列或者多列就会把狼蚁网站SEO优化的列表分布在两边。
虽然可以解决，还是想看一下用普通的css是如何布局的。因为就写了这个。

在网上找了一些教程，都是写死的宽度来进行操作的。我把它改造成了百分比的格式，简单来记录一下。
先上css

<style>
         {
            padding: 0px;
            margin: 0px;
            box-sizing: border-box;
        }
        
        .max-box {
            max-width: 1200px;
            margin: 0px auto;
        }
        
        .box {
            overflow: hidden;
            width: calc(100% + 20px);
            margin-left: -10px;
        }
        
        .inner {
            height: 100px;
            border: solid 1px red;
            float: left;
            margin-left: 10px;
            width: calc(((100% - 20px) - 10px  3) / 4);
        }
        
        .max-box2 {
            max-width: 1200px;
            margin: 50px auto;
            border: solid 1px red;
            height: 200px;
        }
    </style>

再上html

 <div class="max-box2">

    </div>
    <div class="max-box">
        <div class="box">
            <div class="inner">

            </div>
            <div class="inner">

            </div>
            <div class="inner">

            </div>
            <div class="inner">

            </div>
        </div>
    </div>

把这些套入到html就可以看到效果了。
如下图

一下那个公式

x = 10px; 即想要的间距
y = 4     即想要排列的个数
父级  width: calc(100% + (x  2));
子级  width: calc(((100% - (x  2)) - x  ( y - 1)) / y );

到此这篇关于css 布局之两端布局（利用父级负的margin）的文章就介绍到这了,更多相关css 布局父级负的margin内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章，希望大家以后多多支持狼蚁SEO！

上一篇：CSS通过letter-spacing属性控制字与字间隔下一篇：CSS3实现淘宝留白的方法

css 布局之两端布局的实例代码（利用父级负的

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

css 布局 之 两端布局的实例代码 （利用父级负的

长沙网站设计

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

css 布局之两端布局的实例代码（利用父级负的