Как разместить несколько слоёв 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-6
    col-6

Рейтинг: 0/5 - 0 голосов

Комментарии ()