css布局如何實(shí)現(xiàn)兩端布局

這篇文章主要介紹了css布局如何實(shí)現(xiàn)兩端布局，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

最近在進(jìn)行開發(fā)的過(guò)程中，有遇到兩端對(duì)齊的布局，是按照百分比來(lái)進(jìn)行布局的，之前有用過(guò)flex布局，但是flex布局，使用兩端布局的時(shí)候，會(huì)出現(xiàn)一切bug。比如，下面的是動(dòng)態(tài)生成的時(shí)候，三列或者多列就會(huì)把下面的列表分布在兩邊。
雖然可以解決，但是還是想看一下用普通的css是如何布局的。因?yàn)榫蛯懥诉@個(gè)。

在網(wǎng)上找了一些教程，都是寫死的寬度來(lái)進(jìn)行操作的。我把它改造成了百分比的格式，簡(jiǎn)單來(lái)記錄一下。
先上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就可以看到效果了。
如下圖

最后總結(jié)一下那個(gè)公式

x = 10px; 即：想要的間距
y = 4     即：想要排列的個(gè)數(shù)
父級(jí)：  width: calc(100% + (x * 2));
子級(jí)：  width: calc(((100% - (x * 2)) - x * ( y - 1)) / y );

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“css布局如何實(shí)現(xiàn)兩端布局”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!