Slik begrenser du innholdet til en Div-tag i HTML

Å lage et nettsted ved hjelp av div-elementer og CSS for struktur er normen - det gir en mer lettvektsløsning enn tabeller ved å bruke signifikant mindre kode. Dette reduserer størrelsen på sidene dine, og dermed forkorter belastningstiden. Å bruke divs kan også være vanskelig; Hvis layoutet ditt bruker flytende elementer, og et bilde eller en lang lenke utvider siden av en div, kan den ødelegge hele oppsettet. Løsningen er enkel å implementere.

1.

Finn elementet du vil begrense i størrelse på siden din. Legg til «stil» -attributtet og spesifiser «overflyt: skjult;». For eksempel:

Overløpspesifikasjonen forteller nettleseren hvordan du behandler innhold som overstiger de angitte dimensjonene til en div. Standard oppførsel er "synlig", som viser alt innhold i boksen. Hvis du bare vil klippe innholdet i en retning, kan du spesifisere "overflow-y" for vertikal og "overflow-x" for horisontal, for eksempel:

2.

Begrens maksimal bredde på bildene på siden din. Du kan angi individuell bredde på hvert bilde individuelt, men ved å sette alle bilder i en div for å ha en maksimal bredde, kan du stoppe dem fra å bryte bredden på diven din. Legg til:

Del img {maksimal bredde: 250px; }

Hvor "250px" representerer ønsket bredde på bilder. Ved å spesifisere "#divid" først - hvor #divid reflekterer IDen til diven i spørsmålet - målretter du bare mot bilder i den div. Hvis du bare angir "img", vil den målrette mot hvert bilde på siden din.

3.

Sett "z-indeksen" for å stoppe overløp fra skjult innhold. Hvis du ikke vil gjemme overløpet, er et annet verktøy å angi en lavere z-indeks på en div og en høyere på noen nærliggende div-elementer. For eksempel, hvis du alltid vil overflow i innholdsdivene for å dukke opp under sidebar-diven, bruker en z-indeks det arbeidet. Det høyeste z-indeksnummeret er alltid på toppen. For eksempel:

Tallet er vilkårlig; du kan sette en z-indeks på 1000 og en annen ved 2.

Tips

  • Hvis du har tilgang til sidens stilark, kan du legge til "overflow: hidden;" til divens styling i arket i stedet for i HTML-elementet.