css 合理布局 之 两边合理布局的案例编码 (运用

日期:2020-09-18 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

近期在开展开发设计的全过程中,有遇到两边对齐的合理布局,是依照百分比来开展合理布局的,以前有效过flex合理布局,可是flex合理布局,应用两边合理布局的情况下,会出現1切bug。例如,下面的是动态性转化成的情况下,3列或两列就会把下面的目录遍布在两侧。
尽管能够处理,可是還是想看1下用一般的css是怎样合理布局的。由于就写了这个。

在网络上找了1些实例教程,全是写死的宽度来开展实际操作的。我把它更新改造变成百分比的文件格式,简易来纪录1下。
先上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: ⑴0px;
        }
        
        .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便可以看到实际效果了。
以下图

最终总结1下那个公式

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

总结

到此这篇有关css 合理布局 之 两边合理布局 (运用父级负的margin)的文章内容就详细介绍到这了,更多有关css 合理布局父级负的margin內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!