Блоки одинаковой высоты
Всем привет, нужна ваша помощь.
Есть три дива, на странице, нужно, что бы они были все одинаковой высоты, они резиновые, и в любом диве может быть много текста, а высота должна быть одинаковая. Дивы могут размещаться в любой части странице. Буду очень благодарен вашей помощи. |
Енот,
1. :) Разместить все див в ячейках таблицы заданной ширины с margin:0; затем спозиционировать с posizion:absolute в нужное место 2. Придать один класс. перебрать и отследить наибольшую высоту и задать всем идентичную 3. Задать жестко высоту с автоскроллом |
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrapper {
width: 80%;
display: flex;
margin: auto;
}
.column {
border: 2px solid #ccc;
margin-right: 0.5em;
}
.column:last-child {
margin-right: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus alias, atque aut corporis esse id ipsa labore libero obcaecati officiis possimus quam recusandae repellendus similique ullam unde voluptate voluptates? Mollitia.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi cum dicta, dolorum ea eveniet explicabo fugiat in laborum magni odio officiis optio perspiciatis, possimus quaerat reprehenderit vel veritatis. Deserunt, nulla!</p>
<p>Adipisci consectetur consequuntur doloremque doloribus ipsa odio placeat quidem voluptate. Debitis ex in nihil possimus quisquam vitae voluptates? Aliquam aliquid cumque dolor facilis iure nihil nobis non placeat quasi repellendus.</p>
<p>Adipisci, aliquam architecto asperiores aspernatur at consequuntur cum fuga ipsa iste iure natus nisi numquam odio perspiciatis placeat provident qui quo rem repellendus repudiandae, rerum saepe, sint sit suscipit tempora.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci dolor ex labore, molestias mollitia nobis quasi! Aperiam blanditiis eos error laboriosam libero, maxime molestias nostrum, quas quidem temporibus tenetur, veritatis.</p>
</div>
</div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 13:09. |