首頁猿問父元素寬度不定，多個子元素如何平均分布？

父元素寬度不定，多個子元素如何平均分布？

JavaScript

慕碼人8056858 2019-03-20 18:15:39

類似效果：問題：父元素寬度自適應(yīng)瀏覽器窗口寬度，那么其中的子元素如何水平均勻分布呢（包含左右外邊距）？需要兼容ie8不考慮flex等css3布局。

查看完整描述

5 回答

慕勒3428872

TA貢獻(xiàn)1848條經(jīng)驗(yàn) 獲得超6個贊

父元素寬度百分比，里面框框inline-block且寬度百分比，然后給框框加外邊距百分比。另外框框外邊距設(shè)為百分比這個百分比是根據(jù)父元素寬度來定的，所以所有框框?qū)挾?%)加上所有框框所有外邊距(%)=父元素寬度(即100%)即可。

補(bǔ)充：用inline-block元素與元素間會多出間隙導(dǎo)致間距偏大，這個問題你搜搜怎么解決，詳細(xì)的就不在這展開了。

反對回復(fù) 2019-04-02

夢里花落0921

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超6個贊

flex布局

反對回復(fù) 2019-04-02

翻翻過去那場雪

TA貢獻(xiàn)2065條經(jīng)驗(yàn) 獲得超14個贊

flex布局了解一下

父容器display:flex;然后調(diào)試justify-content，選擇你想要的效果。

反對回復(fù) 2019-04-02

哈士奇WWW

TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超6個贊

1.首尾外邊距 2% 中間外邊距1% 占據(jù)7%父元素的寬度在拼接html時動態(tài)添加進(jìn)去
2.每個元素本身占據(jù) 93%/元素個數(shù) <li style="width:'+(93/itemsLength).toFixed(6)+'+'%';float:left;display:inline-block"><li>

反對回復(fù) 2019-04-02