A min-width tulajdonság

A min-width tulajdonság az elem minimális szélességét határozza meg. A tulajdonság értéke lehet bármely mértékegység a méretekhez vagy a none kulcsszó, ami azt jelenti, hogy nincs érték megadva.

Általában lebegő szélességű elemeknél használják (a szélesség százalékban van megadva vagy egyáltalán nincs megadva, és az elem a tartalma alapján változtatja a szélességét). Ha az elem szélessége százalékban van megadva - a böngészőablak csökkentésével a szélesség is csökkenni fog, amíg el nem éri a min-width értékét.

Szintaxis

cssszelektor {
  max-width: érték;
}

Példa

Ebben a példában a szélesség a szülő elem szélességének százalékában van megadva. Csökkentsd a böngészőablak szélességét, és a tároló is csökkenni fog, hogy alkalmazkodjon a böngészőablak szélességéhez. Azonban csak addig fog csökkenni, amíg el nem éri a min-width által meghatározott értéket, ami 400px. Amint a tároló eléri ezt a szélességet - többé nem fog csökkenni:

html<div id="elem"></div>

css#elem {
  width: 70%;
  min-width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Példa

Ebben a példában a tároló szélessége mindkét oldalról korlátozva van: nem lehet nagyobb, mint 900px és kisebb, mint 400px:

html<div id="elem"></div>

css#elem {
  width: 70%;
  min-width: 400px;
  max-width: 900px;
  height: 100px;
  border: 1px solid black;
}

Результат:

Lásd még