創(chuàng)新互聯(lián)www.cdcxhl.cn八線動(dòng)態(tài)BGP香港云服務(wù)器提供商，新人活動(dòng)買多久送多久，劃算不套路！

創(chuàng)新互聯(lián)客戶idc服務(wù)中心，提供四川樂(lè)山服務(wù)器托管、成都服務(wù)器、成都主機(jī)托管、成都雙線服務(wù)器等業(yè)務(wù)的一站式服務(wù)。通過(guò)各地的服務(wù)中心，我們向成都用戶提供優(yōu)質(zhì)廉價(jià)的產(chǎn)品以及開(kāi)放、透明、穩(wěn)定、高性價(jià)比的服務(wù)，資深網(wǎng)絡(luò)工程師在機(jī)房提供7*24小時(shí)標(biāo)準(zhǔn)級(jí)技術(shù)保障。

CSS怎么實(shí)現(xiàn)兩端布局？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

最近在進(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)榫蛯懥诉@個(gè)。

在網(wǎng)上找了一些教程，都是寫死的寬度來(lái)進(jìn)行操作的。我把它改造成了百分比的格式，簡(jiǎn)單來(lái)記錄一下。
先上css

再上html

把這些套入到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 );

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。

分享文章：CSS怎么實(shí)現(xiàn)兩端布局-創(chuàng)新互聯(lián)
分享URL：http://weahome.cn/article/dpicpj.html