Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

CSS/Eigenschaften/Größenangaben/max-width

Aus SELFHTML-Wiki
< CSS‎ | Eigenschaften‎ | Größenangaben(Weitergeleitet von Max-width)
Wechseln zu: Navigation, Suche

Die Eigenschaft max-width legt die Maximalbreite eines CSS-Elements fest. Hierbei wird die Breite des Elements an den Inhalt angepasst, falls die Breite kleiner als die Maximalbreite ist.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • CSS 2.0
Beispiel ansehen …
div > div {
  display: inline-block;
  vertical-align: top;
  height: 10em;
  width: auto;
  background-color: khaki;
  margin: 1em .5em;
}
p:first-child {
  text-align: center;
}
code {
  display: block;
}
.max_20 {
  max-width: 20em;
}
.max_40 {
  max-width: 40em;
}
width_10 {
  width: 10em;
}
.width_20 {
  width: 20em;
}
.width_60 {
  width: 60em;
}
.width_50p {
  width: 50%;
}
<h1>Beispiele zur Verwendung von width und max-width</h1>
<div>
  <div class="width_20">
    <p><code>width: 20em;</code><code>max-width: none;</code></p>
    <p>Diese beiden Elemente </p>
  </div>
  <div class="width_20">
    <p><code>width: 20em;</code><code>max-width: none;</code></p>
    <p>haben eine festgelegte Breite von 20em.
      Die Box passt sich nicht einem schmaleren Inhalt an.
    </p>
  </div>
</div>
<!-- … -->
Beachten Sie: In diesem Beispiel sind die Klassenbezeichner nach der gegenwärtig gewünschten Darstellung gewählt. In einem konkreten Projekt sollten Sie Klassen entsprechend der Inhalte bezeichnen.

Erlaubt sind folgende Werte:

  • eine nicht-negative Längenangabe
  • eine Prozentangabe, diese bezieht sich auf die Breite des umschließenden Blocks
  • none, keine Beschränkung in der Breite, Ausgangswert
  • inherit, es gilt die maximale Breite des Elternelements
  • unset, hebt den bisher gesetzten Wert wieder auf (nur sinnvoll in Kombination mit @media-Regeln)

Das Verhalten von Inhalten, die breiter als die maximale Breite sind, lässt sich über die Eigenschaft overflow steuern.

Gegenüberstellung von min-width und max-width ansehen …
div {
  height: 10em;
  width: 50%;
  background-color: khaki;
  margin: 1em auto;
}
p:first-child {
  text-align: center;
}
code {
  display: block;
}
.min_40 {
  min-width: 40em;
}
.max_40 {
  max-width: 40em;
}
#vergleich {
  width: 40em;
  height: 2em;
  line-height: 2em;
}
<h1>min-width und max-width im Vergleich</h1>
<div class="min_40">
  <p><code>min-width: 40em;</code><code>width: 50%;</code></p>
  <p>Dieser Absatz soll halb so breit wie sein Elternelement sein, jedoch nicht schmaler als 40em werden.
      Probieren Sie es aus, indem Sie die Breite des Browserfensters verändern.</p>
</div>
<div id="vergleich">
  <p>Zum Vergleich: Diese Box ist 40em breit.</p>
</div>
<div class="max_40">
  <p><code>width: 50%;</code><code>max-width: 40em;</code></p>
  <p>Dieser Absatz soll halb so breit wie sein Elternelement sein, jedoch nicht
    breiter als 40em werden. Probieren Sie es aus, indem Sie die Breite des
    Browserfensters verändern.
  </p>
</div>

Siehe auch[Bearbeiten]