max-width
Legt die maximale Breite eines Elements fest.
Syntax
{ max-width: sMaxWidth }
Mögliche Werte
sMaxWidth
Variante, mit der die maximale Breite für ein Element angegeben oder empfangen wird:
length |
Gleitkommazahl, gefolgt von einem Absoluteinheitendesignator (cm, mm, in, pt oder pc) oder einem Relativeinheitendesignator (em, ex oder px). Weitere Informationen zu den unterstützten Längeneinheiten finden Sie unter Verweis auf Längeneinheiten. |
percentage |
Ganze Zahl, gefolgt von einem Prozentzeichen (%). Dieser Wert gibt an, wie viel Prozent der Breite des umschließenden Blocks als maximale Breite des Elements verwendet werden soll. (Der umschließende Block wird auch als Containing-Bock bezeichnet.) Falls die Breite des umschließenden Blocks nicht explizit festgelegt ist, weist das Element keine maximale Breite, und die max-width-Eigenschaft wird als 0% interpretiert. Weitere Informationen zu umschließenden Blöcken und zur Berechnung ihrer Breite finden Sie unter Cascading Style Sheets (CSS), Level 2, Revision 1 (CSS2.1) (möglicherweise in englischer Sprache). |
Die Eigenschaft hat keinen Standardwert. Sie wird nicht vererbt.
Hinweise
Die Attribute min-width und max-width gelten für unverankerte und absolut positionierte Elemente auf Blockebene, Inlineblockelemente sowie für einige spezifische Steuerelemente. Sie gelten nicht für nicht ersetzte Inlineelemente wie Tabellenzeilen und Zeilen-/Spaltengruppen. (Ein "ersetztes" Element hat systeminterne Abmessungen, z. B. ein IMG-Element oder ein TEXTAREA-Element.)
Diese Eigenschaft wird ausschließlich unter dem strikten !DOCTYPE aktiviert.
Beispiel
Das folgende Beispiel zeigt, wie sich die Breite eines DIV-Elements durch Verwendung der Attribute min-width und max-width einschränken lässt. Das Beispiel kann nur mit Internet Explorer 7 oder einer späteren Produktversion angezeigt werden.
<!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>
Informationen zu Standards
Diese Eigenschaft ist unter Cascading Style Sheets (CSS), Level 2 (CSS2) (möglicherweise in englischer Sprache) definiert.
Gilt für
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