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

在網(wǎng)上找了一些教程，都是寫(xiě)死的寬度來(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

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

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

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

推薦教程：《CSS教程》