共用方式為


max-width

設定元素的寬度上限。

語法

{ max-width: sMaxWidth }

可能的值

sMaxWidth

指定或接收元素寬度上限的變數:

length

浮點數值,後接絕對單位指示項 (cmmminptpc) 或相對單位指示項 (emexpx)。

如需支援之長度單位的詳細資訊,請參閱長度單位參照

percentage

後接百分比符號 (%) 的整數,該數值指定容器區塊寬度的百分比,以當作元素的寬度上限。如果未明確設定容器區塊的寬度,元素寬度便無上限,而 max-width 屬性會解譯為 0%。如需容器區塊與其寬度計算方式的詳細資訊,請參閱 Cascading Style Sheets (CSS), Level 2, Revision 1 (CSS2.1) (階層式樣式表 (CSS) 層級 2,修訂 1) 規格。

此屬性沒有預設值。這不是繼承屬性。

備註

min-widthmax-width 屬性適用於浮點與絕對定位區塊層級元素、內嵌區塊元素及某些內建控制項;但不適用於表格列與列/欄群組等非置換內嵌元素 (「置換元素」具有內建尺寸,例如 IMG 元素或 TEXTAREA 元素)。

此屬性只能在精確 !DOCTYPE 下啟用。

範例

下列範例顯示如何使用 min-widthmax-width 屬性來限制 DIV 元素的寬度。此範例只能以 Internet Explorer 7 或更新版本檢視:

<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Strict//EN">
<html>
<head><style>
.width {
    width:50%;
    min-width:200px;
    max-width:400px;
    background:#eee;
}
.content {
    border :1px solid #c00;
    padding:5px;
}
</style>
</head>
<body>
<div class="width">
<div class="content">
        <h2>{min-width:200px; max-width:400px}</h2>
        <p>This div also has a width of 50%. Resize the window
         to grow and shrink the div from max to min width.<br/><br/>
         The outer div controls the width of the inner "content" div.
         Note that the div height increases to accomodate the flow of text.</p>
</div>
</div>
</body>
</html>

標準資訊

此屬性是在階層式樣式表 (CSS) 層級 2 (CSS2) (英文) 中定義。

適用於

A、ABBR、ACRONYM、ADDRESS、APPLET、B、BDO、BIG、BLOCKQUOTE、BUTTON、CAPTION、CENTER、CITE、CODE、CUSTOM、DD、DEL、DFN、DIV、DL、DT、EM、FIELDSET、FONT、FORM、HN、HR、I、IMG、INPUT TYPE=BUTTON、INPUT TYPE=CHECKBOX、INPUT TYPE=FILE、INPUT TYPE=IMAGE、INPUT TYPE=PASSWORD、INPUT TYPE=RADIO、INPUT TYPE=RESET、INPUT TYPE=SUBMIT、INPUT TYPE=TEXT、INS、LI、OL、OPTION、P、Q、RT、RUBY、S、SELECT、SPAN、SUB、TT、U、UL、VAR、XMP

請參閱

概念

min-width

width

min-height

max-height