介绍 & lt; style>
,,,,,,,*,{
,,,,,,,,,,,填充:,0 px;
,,,,,,,,,,,保证金:,0 px;
,,,,,,,,,,,box-sizing:, border-box;
,,,,,,,}
,,,,,,,
,,,,,,,.max-box {
,,,,,,,,,,,max-width:, 1200 px;
,,,,,,,,,,,保证金:,0 px 汽车;
,,,,,,,}
,,,,,,,
,,,,,,,.box {
,,,,,,,,,,,溢出:,隐藏;
,,,,,,,,,,,宽度:,calc (100%, +, 20 px);
,,,,,,,,,,,margin-left:, -10 px;
,,,,,,,}
,,,,,,,
,,,,,,,.inner {
,,,,,,,,,,,身高:,100 px;
,,,,,,,,,,,边界:,solid 1 px 红色;
,,,,,,,,,,,:浮动,离开;
,,,,,,,,,,,margin-left:, 10 px;
,,,,,,,,,,,宽度:,calc(((100%,安康;20 px),安康;10 px *, 3),/, 4);
,,,,,,,}
,,,,,,,
,,,,,,,.max-box2 {
,,,,,,,,,,,max-width:, 1200 px;
,,,,,,,,,,,保证金:,50 px 汽车;
,,,,,,,,,,,边界:,solid 1 px 红色;
,,,,,,,,,,,身高:,200 px;
,,,,,,,}
,,,& lt;/style> , & lt; div 类=癿ax-box2"比;
,,,& lt;/div>
,,,& lt; div 类=癿ax-box"比;
,,,,,,,& lt; div 类=癰ox"比;
,,,,,,,,,,,& lt; div 类=癷nner"比;
,,,,,,,,,,,& lt;/div>
,,,,,,,,,,,& lt; div 类=癷nner"比;
,,,,,,,,,,,& lt;/div>
,,,,,,,,,,,& lt; div 类=癷nner"比;
,,,,,,,,,,,& lt;/div>
,,,,,,,,,,,& lt; div 类=癷nner"比;
,,,,,,,,,,,& lt;/div>
,,,,,,,& lt;/div>
,,,& lt;/div> x =, 10 px;,即:想要的间距
时间=y 4,,,,,即:想要排列的个数
父级:,,宽度:,calc (100%, +, (* x 2));
子级:,,宽度:,calc(((100%,安康;(* x 2)),安康;x *, (, y 作用;1)),/,y );
这篇文章主要介绍了css布局如何实现两端布的局,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
最近在进行开发的过程中,有遇到两端对齐的布局,是按照百分比来进行布局的,之前有用过flex布的局,但是flex布的局,使用两端布局的时候,会出现一切错误。比如,下面的是动态生成的时候,三列或者多列就会把下面的列表分布在两边。
虽然可以解决,但是还是想看一下用普通的css是如何布局的。因为就写了这个。
在网上找了一些教程,都是写死的宽度来进行操作的。我把它改造成了百分比的格式,简单来记录一下。
先上css
再上html
把这些套入到html就可以看到效果了。
如下图
最后总结一下那个公式
感谢你能够认真阅读完这篇文章,希望小编分享的“css布局如何实现两端布局”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!
