Tip: Afhankelijk van de reden waarom u een div wilt verbreken, kunt u ook overwegen een tag te gebruiken, wat een inline-level element is en niet doorbreekt naar de volgende regel, tenzij het standaardgedrag is gewijzigd.
Opmerking: om deze voorbeelden gemakkelijker te gebruiken en te begrijpen voor alle typen computergebruikers, gebruiken we het stijlkenmerk in de div. Als u een van deze voorbeelden op meerdere pagina's wilt gebruiken, raden we u ten zeerste aan een cachebaar CSS-bestand te maken met de stijlinstellingen in het bestand.
In onze onderstaande voorbeelden zullen we de div's als verschillende kleuren laten zien om te illustreren hoeveel ruimte de div bezet en waar op het scherm de div wordt geplaatst.
Standaard gedrag
Hieronder ziet u een voorbeeld van het standaard div-gedrag van het blokelement Div dat een van de eerste regels van het bijbehorende element bezet, gevolgd door de tweede Div-twee .
Div een
Div twee
Div Div twee
Zelfs als je de grootte van een Div een zou verkleinen om ruimte te maken voor de andere div, omdat het blokelementen zijn, zou je ruimte overlaten naast Div een en Div twee onder Div één . Om de div naar de volgende regel te verplaatsen, moeten beide div's de inline-blokweergave-instelling hebben zoals hieronder getoond.
Div een
Div twee
Div Div twee
Hieronder staan een paar verschillende voorbeelden van een divisie met drie kolommen. Ten eerste volgt de kolom div onderstaande kolom hetzelfde idee als de bovenstaande voorbeelden, behalve dat het een div toevoegt.
Div een
Div twee
Div drie
Div een div Div twee Div
Natuurlijk, als je wilt dat de divs 100% van het bevattende element bezetten, wordt het een beetje lastiger. Hieronder ziet u een voorbeeld van hoe u drie div's naast elkaar kunt maken die 100% van het element innemen. In het onderstaande voorbeeld laten we in plaats van alle div's op dezelfde regel met inline-blok, de linker en rechter div. Zweven.
Div een
Div drie
Div twee
Div One DIV THREE Div Two
Tip: hoewel het bovenstaande voorbeeld van een kolom met drie div's responsief is, kunnen aanvullende aanpassingen zoals verbergen van Div drie en aanpassen van de breedten ook aan de stijl worden toegevoegd.