Как разместить несколько слоёв DIV по горизонтали
Часто бывают ситуации когда нужно выровнять два и более слоя DIV по горизонтали. Так, что бы блок шел один за одним, но когда окно браузера становится меньше DIV автоматически перестраивались вертикально в ряд.
- Вариант №1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Слои по горизонтали</title> <style> .layer1 { background-color: #fc0; /* Цвет фона слоя */ padding: 5px; /* Поля вокруг текста */ float: left; /* Обтекание по правому краю */ width: 200px; /* Ширина слоя */ } .layer2 { background-color: #c0c0c0; /* Цвет фона слоя */ padding: 5px; /* Поля вокруг текста */ width: 300px; /* Ширина слоя */ float: left; /* Обтекание по правому краю */ } .clear { clear: left; /* Отмена обтекания */ } </style> </head> <body> <div class="layer1"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> <div class="layer2"> Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi. </div> <div class="clear"></div> <p>Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.</p> </body> </html>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.
- Вариант №2 Вырвнивание DIV по горизонтали использууя сетку библиотеки bootstrap.
<div class="container"> <div class="row"> <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 bg-primary text-white"></div> <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 bg-secondary text-white"></div> </div> </div>
Рабочий примерcol-6col-6
Рейтинг:
/5 -
голосов
Комментарии ()