Как сделать одинаковые колонки с текстом при помощи CSS

Я думаю у вас очень часто возникала ситуация, когда вы хотели разбить информацию , к примеру на два отдельных блока, но по содержанию она отличалась, причём так, что чаще всего одна из колонок становилась больше в высоту, а вторая меньше и из-за этого смешались элементы , которые располагались чуть ниже. Для того чтобы дизайн не потерял своего товарного вида в независимости от того какое количество информации располагается в столбцах, необходимо их выровнять т.е сделать их одинаковым в высоту. Для этого необходимо прибегнуть к простому способу, который будет описан чуть ниже.

Как сделать одинаковые колонки с текстом при помощи CSS
1. Способ первый — добавляем дополнительные строки.
И так просто создадим два столбца с информацией в файле HTML

 div class="container clearfix">  
    <div class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit.   
    Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.   
    Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit,   
    lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non,   
    dictum vitae mi. Donec sed bibendum ante.</div>  
  
    <div class="sidebar">Lorem ipsum dolor sit amet, consectetur adipiscing elit.   
    Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis.</div>  
</div>  

Зададим самый простой стиль

    .container {  
        /* none */  
    }  
    .main, .sidebar {  
        float: left;  
        padding: 20px;  
    }  
    .main {  
        width: 400px;  
        background-color: LightSlateGrey;  
    }  
    .sidebar {  
        width: 200px;  
        background-color: Tomato;  
    }  

Но в этом случае наши столбцы будут неодинаковыми, теперь добавим колонку и перенесём свойство цвета, задав его другому элементу.

.container {  
    background-color: Tomato;  
}  
.main, .sidebar {  
    float: left;  
    padding: 20px;  
}  
.main {  
    width: 400px;  
    background-color: LightSlateGrey;  
}  
.sidebar {  
    width: 200px;  
}

Всё проблема — решена.
2. Способ второй — проверенный не одним годом и разработчиком, заносим все данные в тэг div, которому задаём поведение таблицы
Структура HTML страница такая же как и в предыдущем примере, мы с вами будем изменять только файл стилей

    .main, .sidebar {  
        float: none;  
        padding: 20px;  
        vertical-align: top;  
    }  
    .container {  
        display: table;  
    }  
    .main {  
        width: 400px;  
        background-color: LightSlateGrey;  
        display: table-cell;  
    }  
    .sidebar {  
        width: 200px;  
        display: table-cell;  
        background-color: Tomato;  
    }  

Всё что надо было, так это задать тэгу div поведение таблицы



Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *