本文摘自PHP中文网，作者Guanhui，侵删。
最近在进行开发的过程中，有遇到两端对齐的布局，是按照百分比来进行布局的，之前有用过flex布局，但是flex布局，使用两端布局的时候，会出现一切bug。比如，下面的是动态生成的时候，三列或者多列就会把下面的列表分布在两边。
虽然可以解决，但是还是想看一下用普通的css是如何布局的。因为就写了这个。
在网上找了一些教程，都是写死的宽度来进行操作的。我把它改造成了百分比的格式，简单来记录一下。
先上css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <p class="max-box2">
</p>
<p class="max-box">
<p class="box">
<p class="inner">
</p>
<p class="inner">
</p>
<p class="inner">
</p>
<p class="inner">
</p>
</p>
</p>
|
把这些套入到html就可以看到效果了。
如下图
最后总结一下那个公式
1 2 3 4 | x = 10px; 即：想要的间距
y = 4 即：想要排列的个数
父级： width: calc(100% + (x * 2));
子级： width: calc(((100% - (x * 2)) - x * ( y - 1)) / y );
|
推荐教程：《CSS教程》
以上就是CSS 布局之两端布局实现的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
css怎么隐藏横向滚动条
css怎么嵌入到html中？
css hack是什么意思
网页不能正常显示css怎么办
css background-origin属性怎么用
css如何实现渐渐消失
css中什么是行高
css怎么设置下划线
css超链接字体颜色如何改变
css是用来做什么的?
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » CSS 布局之两端布局实现
