Kuidas varjata alumist ülevoolu CSS-is, määrates vanema Div-i laiuse

Eesitlus

Ülevoolu haldamine on veebidisaini oluline aspekt. See määratleb, kuidas koheldakse sisu, mis ületab elemendi kasti. Selles juhendis näitame, kuidas varjata alumine ülevool, kui div on oma vanema jaoks liiga suur, määrates CSS-i abil vanema div-i laiuse.

Peitke alumine ülevool

Samm 1: HTML-struktuuri määratlemine

Esmalt loome vanema div-i ja lapsdiv-i, mis on oma vanema jaoks liiga suur.

<div class="parent">
  <div class="child">Sisu siin</div>
</div>

Samm 2: CSS-stiilide rakendamine

Järgmiseks kasutame CSS-i, et varjata ülevoolu vanemdivist.

.parent {
  width: 100%; /* või mõni konkreetne laius */
  overflow: hidden; /* peidab kogu ülevoolu */
}

.child {
  width: 150%; /* või mis tahes suurus, mis on vanemast suurem */
}

Kokkuvõte

Sättides vanem div-i omaduse 'overflow' väärtuseks 'hidden', saame tagada, et kõik lapsdiv-i sisu, mis ületab vanem div-i suuruse, oleks peidetud. See on kasulik tehnika paigutuse ja kujunduse haldamiseks CSSis.