min-width，設(shè)置最小寬度

發(fā)布時間：2020-07-02 15:35:09 來源：網(wǎng)絡(luò) 閱讀：959 作者：FrontDream 欄目：開發(fā)技術(shù)

在完成百度IFE任務(wù)五時，遇到一個布局問題，百思不得其解。

問題是這樣的：任務(wù)五是一個兩欄布局，左欄自適應(yīng)，右欄固定寬度。我的解決方式是：右欄固定寬度，float:right，左欄通過margin-right設(shè)置一定的右外邊距，這樣完成了布局。然而測試時，發(fā)現(xiàn)瀏覽器窗口在非常小的時候，左欄會被無限擠壓，內(nèi)容布局發(fā)生變化，很難看。在踩了很多坑后，發(fā)現(xiàn)只要設(shè)置一個min-width，就可以保證內(nèi)容不會被無限擠壓。

min-width:

在網(wǎng)頁中，如果一個元素沒有設(shè)置最小寬度(min-width)，這時當(dāng)瀏覽器縮小到一定程度時，元素中的布局可能會發(fā)生變化。如果想要保持布局不變，可以給該元素（如div)設(shè)置最小寬度屬性，比如：

<style> 
#footer { 
min-width:960px; /* 最小寬度設(shè)置為960像素，當(dāng)瀏覽器寬度小于該值時，該元素不再自適應(yīng)，而是部分元素被遮擋住。*/ 
} 
</style>

<div id="footer"></div>

值	描述
length	定義元素的最小寬度值。默認(rèn)值：取決于瀏覽器。
%	定義基于包含它的塊級對象的百分比最小寬度。
inherit	規(guī)定應(yīng)該從父元素繼承 min-width 屬性的值。

瀏覽器兼容：IE、Firefox、Chrome、Safari、Opera

注釋：任何版本的 Internet Explorer （包括 IE8）都不支持屬性值 "inherit"。所有主流瀏覽器都支持 min-width 屬性。

向AI問一下細(xì)節(jié)

min-width，設(shè)置最小寬度

瀏覽器兼容：IE、Firefox、Chrome、Safari、Opera

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

min-width，設(shè)置最小寬度

瀏覽器兼容：IE、Firefox、Chrome、Safari、Opera