Tips: Beroende på varför du vill bryta en div kan du också överväga att använda en tagg, vilket är ett inline-nivåelement och bryter inte till nästa rad om inte dess standardbeteende ändras.
Obs! För att göra dessa exempel enklare att använda och förstå för alla typer av datoranvändare använder vi stilattributet i div. Om du har för avsikt att använda något av dessa exempel på flera sidor rekommenderar vi starkt att skapa en cache-fil med stilinställningarna i filen.
I våra exempel nedan kommer vi att visa divs som olika färger för att hjälpa till att illustrera hur mycket avstånd diven upptar och var på skärmen är div placerad.
Standardbeteende
Nedan är ett exempel på blockelementets standard div-beteende Div som upptar den första raden av dess innehållande element följt av den andra Div två .
Dela en
Dela två
Div en Div två
Även om du skulle minska storleken på en Div en för att göra plats för den andra diven, eftersom de är blockelement skulle du vara kvar med utrymme bredvid Div en och Div två nedan Div ett . För att flytta delningen till nästa rad måste båda divens inställningar för inline-block visas enligt nedan.
Dela en
Dela två
Div en Div två
Nedan är några olika exempel på en tre kolumn div. För det första följer de tre kolumnerna nedan samma idé som ovanstående exempel, förutom att den lägger till en div.
Dela en
Dela två
Div tre
Div en Div två Div tre
Självklart, om du vill att divs ska uppta 100% av det innehållande elementet blir det lite svårare. Nedan är ett exempel på hur du kan skapa tre divs bredvid varandra som upptar 100% av elementet. I exemplet nedan, istället för att hålla alla div på samma rad med inline-block, flyter vi vänster och höger div.
Dela en
Div tre
Dela två
Div One DIV THREE Div Two
Tips: Även om ovanstående exempel på en tre div-kolumn är responsiv, kan ytterligare anpassning som att dölja Div tre och justera bredden också läggas till i stilen.