Савет: У зависности од тога зашто желите да разбијете див, можда ћете желети да размислите ио коришћењу ознаке која је елемент у нивоу инлине и не прекида се у следећи ред осим ако се промени његово подразумевано понашање.
Напомена: Да би ови примери били лакши за коришћење и разумевање за све типове корисника рачунара, ми користимо атрибут стила у див. Ако намеравате да користите било који од ових примера на више страница, препоручујемо да направите ЦСС датотеку у кешу са поставкама стила у датотеци.
У нашим примерима испод, ми ћемо приказати дивове као различите боје како бисмо илустровали колико је размак који див заузима и где се на екрану налази див.
Дефаулт бехавиор
У наставку је приказан пример подразумеваног понашања див-а блоковског елемента Див један који заузима прву линију његовог елемента који следи а затим следи други Див два .
Див један
Див два
Див 1 Див
Чак и ако бисте смањили величину Див-а да бисте направили места за други див, јер су то блокови, остали бисте са простором поред Див- а и Див-2 испод Див-а . Да бисте померили див до следеће линије, оба див-а морају имати поставку приказа инлине-блока као што је приказано испод.
Див један
Див два
Див 1 Див
У наставку је дат неколико различитих примјера три ступца див. Прво, испод три ступца див слиједи исту идеју као и горе наведени примјери, осим што додаје див.
Див један
Див два
Див три
Див 1 Див Див 3 Див
Наравно, ако желите да дивови заузму 100% елемента који садржи, постају мало тежи. Испод је један пример како можете креирати три див-а један поред другог који заузимају 100% елемента. У доњем примеру, уместо да све дивове држимо на истој линији користећи инлине-блоцк, ми лебдимо леви и десни див.
Див један
Див три
Див два
Див Оне ДИВ ТХРЕЕ Див
Савет: Иако је горе наведени пример три див колоне одговарајући прилагођавање, као што је скривање Див три и прилагођавање ширине може се додати стилу.