CSS 佈局之兩端佈局實現

最近在進行開發的過程中，有遇到兩端對齊的佈局，是按照百分比來進行佈局的，之前有用過flex佈局，但是flex佈局，使用兩端佈局的時候，會出現一切bug。例如，下面的是動態產生的時候，三列或是多列就會把下面的清單分佈在兩邊。
雖然可以解決，但還是想看一下用普通的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

 <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就可以看到效果了。
如下圖

最後總結那個公式

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

推薦教學：《CSS教學》

以上是CSS 佈局之兩端佈局實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！