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/min-width

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft min-width legt die Mindestbreite eines Elements fest. Die Eigenschaft unterscheidet sich nicht im Gebrauch von min-height, sie wirkt sich nur statt der Höhe auf die Breite aus.

  • 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_10 {
  max-width: 10em;
}
.min_20 {
 min-width: 20em;
}
.min_40 {
  min-width: 40em;
}
.width_10 {
  width: 10em;
}
.width_20 {
  width: 20em;
}
.width_30 {
  width: 30em;
}
.width_50p {
  width: 50%;
}
<div>
  <div class="width_20">
    <p><code>min-width: 0;</code><code>width: 20em;</code></p>
    <p>Diese beiden Elemente</p>
  </div>
  <div class="width_20">
    <p><code>min-width: 0;</code><code>width: 20em;</code></p>
    <p>haben eine festgelegte Breite von 20em. Ein breiterer
      Inhalt sorgt nicht für eine Verbreiterung des Elements.
    </p>
  </div>
</div>
<div>
  <div class="min_20">
    <p><code>min-width: 20em;</code><code>width: auto;</code></p>
    <p>Für diese beiden Elemente</p>
  </div>
  <div class="min_20">
    <p><code>min-width: 20em;</code><code>width: auto;</code></p>
    <p>gilt eine minimale Breite von 20em. Bei Bedarf wird
      die Box breiter.
    </p>
  </div>
</div>
<!-- … -->

Erlaubt sind folgende Werte:

  • eine nicht-negative Längenangabe
  • eine Prozentangabe, diese bezieht sich auf die Breite des umschließenden Blocks
  • inherit, es gilt die minimale Breite des Elternelements
  • unset, hebt den bisher gesetzten Wert wieder auf (nur sinnvoll in Kombination mit @media-Regeln)
Beachten Sie: Im Gegensatz zu max-width bzw. max-height ist die Angabe none nicht erlaubt. Wenn Sie explizit bestimmen müssen, dass für ein Element keine Mindestbreite gilt, definieren Sie min-width: 0.
Beachten Sie: min-width überschreibt alle Angaben für max-width und width.
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]