鍍金池/ 問(wèn)答/HTML/ css 自動(dòng)繼承width100%問(wèn)題？

css 自動(dòng)繼承width100%問(wèn)題？

今天同事遇到這樣一個(gè)問(wèn)題，如下圖所示的布局
image.png
上面的布局希望，在瀏覽器窗口大小改變的時(shí)候，黃色的div寬度依然左右居中，寬度被自己的子元素?fù)伍_(kāi)，但是卻沒(méi)有達(dá)到想要的效果，如下圖所示：
image.png
經(jīng)過(guò)查閱發(fā)現(xiàn)是黃色的div繼承了父元素的100%的width屬性。請(qǐng)問(wèn)怎么解決這個(gè)問(wèn)題呢？

回答
編輯回答
墻頭草

不定寬度的水平居中？先給個(gè)demo你看看還有什么問(wèn)題。
demo

2017年1月21日 23:50
編輯回答
有你在

不是用CSS的calc函數(shù)，vw寬度的情況下
你只能使用JS監(jiān)聽(tīng)resize事件，來(lái)動(dòng)態(tài)計(jì)算黃色框中綠色框的寬度(要設(shè)定綠色框的個(gè)數(shù))

使用calc函數(shù)+ vw 將相對(duì)簡(jiǎn)單些

黃色框{
    width:calc(100vw - 2*左右間距)
}

綠色框{
    width:calc( 100% / 綠色框每行個(gè)數(shù));
}
2018年3月27日 09:59
編輯回答
維他命

你的布局其實(shí)有矛盾的地方：你希望黃色盒子寬度由綠色盒子撐開(kāi)，但又希望黃色盒子居中。那撐開(kāi)多大才是頭啊，100%？那也算居中吧，其實(shí)想要有居中的效果，就是給黃色的盒子設(shè)置一個(gè)最大寬度；
左右居中一般有兩種：
1.固定寬度盒子，使用margin:0 auto;其適用于寬度固定的block元素；
2.寬度不固定，但由其內(nèi)容或者子元素決定，父元素設(shè)置：text-align：center，這種一般適用于inline-block或者inline元素。但其有個(gè)特點(diǎn)。

2017年7月17日 08:07