 Сообщение было отмечено skynet97 как решение
Решение
| HTML5 | 1
2
3
4
5
| <div class="container">
<div class="col col-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat cum doloremque labore quibusdam! Nam quibusdam id repudiandae officiis beatae reprehenderit, veritatis corrupti praesentium debitis placeat amet perspiciatis quaerat nostrum pariatur!</div>
<div class="col col-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum temporibus aliquam rerum, dignissimos incidunt, nobis accusamus optio. Assumenda, possimus accusamus fugit obcaecati quas minima quisquam laboriosam adipisci veniam laudantium, magnam in voluptatum vel, dignissimos porro similique sequi, quae quod necessitatibus et neque voluptatibus delectus. Quis quaerat nesciunt nulla ea deserunt non est nobis, doloremque modi corporis repudiandae sequi enim rem labore commodi quam tenetur ipsam optio quia libero perspiciatis maxime alias. Nostrum rerum, omnis blanditiis molestiae, iure sint quae dolore. Reiciendis amet ea nemo eveniet modi, magni necessitatibus, minus, blanditiis tempore recusandae, officia temporibus placeat libero accusantium aut eos expedita. Minima impedit quisquam ea cum pariatur illo iure, aspernatur quod, tempore doloribus laudantium, fuga voluptatibus provident quam adipisci perferendis? Necessitatibus culpa similique perferendis, sit, rerum blanditiis atque officiis. Voluptatem in quibusdam nulla cumque soluta, aliquam sapiente. Voluptatum sed ipsam in totam hic praesentium, a? Culpa quos dolorum voluptates esse debitis veritatis, ex assumenda accusantium. Vero fuga omnis quaerat sequi molestias labore placeat iusto minus, in accusamus sed voluptatibus dolore fugit vel similique ullam magni. Excepturi natus minima, harum aspernatur aperiam animi sunt assumenda atque id! Magni alias, reiciendis nihil nisi architecto ex debitis cum dolore temporibus quia harum quo pariatur sapiente laudantium quibusdam autem accusamus animi adipisci aliquam ad voluptate? Similique quos aut nemo ut alias dolore officia voluptatum voluptates labore temporibus ducimus ipsam unde fuga velit eum neque, adipisci placeat molestias soluta architecto atque! Voluptatum dolorum possimus magnam, accusantium quisquam facere rerum pariatur quaerat, quam velit facilis, nisi laborum saepe! Vel sapiente tempora quam sint laudantium eum ullam molestiae distinctio quisquam velit expedita, pariatur, ab veritatis quasi natus! Est non eius quo similique optio, vel voluptatibus cumque culpa natus facilis pariatur tenetur ut ipsam a cum, totam repellendus, at hic sed voluptate nobis quod facere aut. Labore magni aperiam praesentium, consequatur sint animi accusamus eveniet necessitatibus velit vitae saepe esse porro nihil atque a, similique impedit iste eligendi ipsa obcaecati ratione voluptates! Fuga inventore temporibus illo beatae, ut quam hic debitis molestiae fugiat. Architecto excepturi cupiditate vel in dignissimos similique deserunt ea dolor quia impedit atque, sit ducimus molestiae quas sapiente et dicta mollitia consequatur facere assumenda temporibus est debitis. Omnis assumenda aliquam aperiam, rerum incidunt temporibus at nulla hic animi excepturi quos, sapiente laboriosam ducimus, error mollitia odit ex et blanditiis! Velit soluta alias culpa, iusto praesentium commodi dolores deserunt officia labore obcaecati explicabo amet aspernatur vero reprehenderit, non libero quas dolor. Eos reprehenderit amet laudantium rerum explicabo corrupti, hic vero minima natus quibusdam sunt neque ea? Dolore neque qui consequuntur. Laudantium magni esse, cumque nihil porro facilis in dignissimos nisi! Magni, nesciunt consectetur excepturi repellendus provident ab obcaecati perferendis. Eos maxime, illum in dicta porro error eveniet eligendi culpa fugiat quo cumque unde minus itaque, quis qui nostrum accusantium possimus sapiente pariatur. Atque illum ratione minima eligendi ipsam, quia maiores, reiciendis iusto odit assumenda molestiae suscipit nisi modi sequi rem asperiores, similique quae omnis? Dolorem laudantium dignissimos praesentium doloremque, recusandae. Et, facilis. Optio explicabo inventore, provident delectus sequi quae rerum ab consectetur dolores sunt voluptas nesciunt aliquid saepe esse quos ducimus sapiente nulla dolorum, nam error reiciendis molestias. Tenetur quaerat commodi minima dolor voluptas nisi, neque culpa magni consequatur nam delectus repellendus temporibus quod fuga! Odio, amet debitis distinctio veritatis delectus! Placeat impedit quos perferendis voluptatibus nesciunt, reprehenderit totam dolore. Beatae, error, incidunt. Eaque aperiam repudiandae quam esse natus amet sequi, explicabo dolorum neque rem. Reiciendis, amet nulla vel facere cum perferendis quo unde, harum itaque iusto! Obcaecati voluptatem delectus totam tempore odio a commodi qui dicta nesciunt error, nostrum vitae dolorum numquam deserunt ducimus explicabo quod illo similique eius minima consectetur. Incidunt illo ea optio quod praesentium ex, quos nobis debitis, itaque, expedita nam tempora cupiditate fugiat, porro. Aut tenetur architecto, officiis veritatis quod distinctio iusto assumenda, laborum quidem ipsum vel totam autem? Nemo cumque culpa sapiente, aut libero labore amet quisquam eos quia molestias fugiat. Quod recusandae excepturi vero eveniet, aperiam numquam ipsa quo asperiores? Quae eligendi, omnis ex voluptates et. Doloribus veniam voluptatem, dolorem voluptatum, adipisci pariatur suscipit magni quas obcaecati sit fugit minima impedit sed id ex ipsa eaque beatae, dicta fuga. Quos ex laborum veniam voluptatum magni in a corrupti amet rem aspernatur obcaecati, perferendis tempore odio voluptates accusantium, eum blanditiis, sunt cum. Architecto ex quaerat, non facere iste sapiente neque a libero obcaecati debitis recusandae inventore perspiciatis at, laboriosam et officia cupiditate ducimus. Vel minus, blanditiis natus, numquam voluptates, molestias repudiandae sequi quae doloribus omnis culpa quia nisi nihil quis iure cumque est sunt aliquam nemo quas alias, sint quod ipsam dolorum. Quis, iusto officia incidunt. Esse recusandae, tenetur illo aperiam veniam laboriosam vero, nulla, voluptate expedita animi facilis repellat optio molestiae inventore ratione quisquam neque laudantium aspernatur fuga doloribus distinctio! Excepturi, voluptatem, iste! Fugit necessitatibus debitis quasi veniam iste temporibus.</div>
<div class="col col-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus nihil sunt cum consequatur aliquam error voluptate? Iste alias maiores consectetur laboriosam id aspernatur quo, dicta aliquid corporis dolore libero cumque? Eum quam nobis odio ratione autem laborum facere, accusamus inventore aperiam. Cumque saepe quis, enim eveniet, fugit temporibus. Temporibus ducimus facere explicabo incidunt modi voluptas, ut ipsum vero optio corrupti laudantium quod quia perspiciatis, praesentium ipsa mollitia placeat eveniet totam laborum. Accusamus eos veniam voluptates quaerat facere nobis quasi esse quo asperiores voluptate debitis corrupti rem dolore repudiandae aliquid quis minus id aliquam, perferendis aperiam natus modi eum numquam molestiae. Nostrum architecto molestias laborum illum maxime! Sed nam vel a suscipit minus asperiores iusto aut? Voluptas eos totam similique placeat quidem voluptatibus quod, fugit laudantium deserunt blanditiis porro vero velit, provident perspiciatis illo repudiandae! Libero eaque perferendis aspernatur consequuntur autem ipsam eos a voluptatum placeat vero maiores mollitia eius, facere! Inventore vel officia sint deleniti accusantium repellat aspernatur voluptatum repellendus dolor ipsum tempora, sed dicta nobis, odio totam asperiores mollitia quos excepturi tenetur vitae! Voluptatibus, delectus. Distinctio autem voluptates quae, fuga voluptatem. Laboriosam consequatur repudiandae aut, a consectetur est sunt blanditiis porro minima. Quaerat vero expedita dolorem voluptas, animi commodi.</div>
</div> |
|
| CSS | 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| .container{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 1200px;
margin: 0 auto;
}
.col{
padding: 20px;
}
.col-1, .col-3{
background: green;
width: 20%;
}
.col-2{
width: 60%;
} |
|
Демо http://codepen.io/anon/pen/Ibmgh
Если же браузер не поддерживает flexbox для фолбэка можно подключить js. Хотя опять же есть решение кроссбраузерное через table-cell: (не люблю эту хрень потому как бывают проблемы с позиционирование в firefox но вам вполне может подойти):
| HTML5 | 1
2
3
4
5
| <div class="container">
<div class="col col-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat cum doloremque labore quibusdam! Nam quibusdam id repudiandae officiis beatae reprehenderit, veritatis corrupti praesentium debitis placeat amet perspiciatis quaerat nostrum pariatur!</div>
<div class="col col-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum temporibus aliquam rerum, dignissimos incidunt, nobis accusamus optio. Assumenda, possimus accusamus fugit obcaecati quas minima quisquam laboriosam adipisci veniam laudantium, magnam in voluptatum vel, dignissimos porro similique sequi, quae quod necessitatibus et neque voluptatibus delectus. Quis quaerat nesciunt nulla ea deserunt non est nobis, doloremque modi corporis repudiandae sequi enim rem labore commodi quam tenetur ipsam optio quia libero perspiciatis maxime alias. Nostrum rerum, omnis blanditiis molestiae, iure sint quae dolore. Reiciendis amet ea nemo eveniet modi, magni necessitatibus, minus, blanditiis tempore recusandae, officia temporibus placeat libero accusantium aut eos expedita. Minima impedit quisquam ea cum pariatur illo iure, aspernatur quod, tempore doloribus laudantium, fuga voluptatibus provident quam adipisci perferendis? Necessitatibus culpa similique perferendis, sit, rerum blanditiis atque officiis. Voluptatem in quibusdam nulla cumque soluta, aliquam sapiente. Voluptatum sed ipsam in totam hic praesentium, a? Culpa quos dolorum voluptates esse debitis veritatis, ex assumenda accusantium. Vero fuga omnis quaerat sequi molestias labore placeat iusto minus, in accusamus sed voluptatibus dolore fugit vel similique ullam magni. Excepturi natus minima, harum aspernatur aperiam animi sunt assumenda atque id! Magni alias, reiciendis nihil nisi architecto ex debitis cum dolore temporibus quia harum quo pariatur sapiente laudantium quibusdam autem accusamus animi adipisci aliquam ad voluptate? Similique quos aut nemo ut alias dolore officia voluptatum voluptates labore temporibus ducimus ipsam unde fuga velit eum neque, adipisci placeat molestias soluta architecto atque! Voluptatum dolorum possimus magnam, accusantium quisquam facere rerum pariatur quaerat, quam velit facilis, nisi laborum saepe! Vel sapiente tempora quam sint laudantium eum ullam molestiae distinctio quisquam velit expedita, pariatur, ab veritatis quasi natus! Est non eius quo similique optio, vel voluptatibus cumque culpa natus facilis pariatur tenetur ut ipsam a cum, totam repellendus, at hic sed voluptate nobis quod facere aut. Labore magni aperiam praesentium, consequatur sint animi accusamus eveniet necessitatibus velit vitae saepe esse porro nihil atque a, similique impedit iste eligendi ipsa obcaecati ratione voluptates! Fuga inventore temporibus illo beatae, ut quam hic debitis molestiae fugiat. Architecto excepturi cupiditate vel in dignissimos similique deserunt ea dolor quia impedit atque, sit ducimus molestiae quas sapiente et dicta mollitia consequatur facere assumenda temporibus est debitis. Omnis assumenda aliquam aperiam, rerum incidunt temporibus at nulla hic animi excepturi quos, sapiente laboriosam ducimus, error mollitia odit ex et blanditiis! Velit soluta alias culpa, iusto praesentium commodi dolores deserunt officia labore obcaecati explicabo amet aspernatur vero reprehenderit, non libero quas dolor. Eos reprehenderit amet laudantium rerum explicabo corrupti, hic vero minima natus quibusdam sunt neque ea? Dolore neque qui consequuntur. Laudantium magni esse, cumque nihil porro facilis in dignissimos nisi! Magni, nesciunt consectetur excepturi repellendus provident ab obcaecati perferendis. Eos maxime, illum in dicta porro error eveniet eligendi culpa fugiat quo cumque unde minus itaque, quis qui nostrum accusantium possimus sapiente pariatur. Atque illum ratione minima eligendi ipsam, quia maiores, reiciendis iusto odit assumenda molestiae suscipit nisi modi sequi rem asperiores, similique quae omnis? Dolorem laudantium dignissimos praesentium doloremque, recusandae. Et, facilis. Optio explicabo inventore, provident delectus sequi quae rerum ab consectetur dolores sunt voluptas nesciunt aliquid saepe esse quos ducimus sapiente nulla dolorum, nam error reiciendis molestias. Tenetur quaerat commodi minima dolor voluptas nisi, neque culpa magni consequatur nam delectus repellendus temporibus quod fuga! Odio, amet debitis distinctio veritatis delectus! Placeat impedit quos perferendis voluptatibus nesciunt, reprehenderit totam dolore. Beatae, error, incidunt. Eaque aperiam repudiandae quam esse natus amet sequi, explicabo dolorum neque rem. Reiciendis, amet nulla vel facere cum perferendis quo unde, harum itaque iusto! Obcaecati voluptatem delectus totam tempore odio a commodi qui dicta nesciunt error, nostrum vitae dolorum numquam deserunt ducimus explicabo quod illo similique eius minima consectetur. Incidunt illo ea optio quod praesentium ex, quos nobis debitis, itaque, expedita nam tempora cupiditate fugiat, porro. Aut tenetur architecto, officiis veritatis quod distinctio iusto assumenda, laborum quidem ipsum vel totam autem? Nemo cumque culpa sapiente, aut libero labore amet quisquam eos quia molestias fugiat. Quod recusandae excepturi vero eveniet, aperiam numquam ipsa quo asperiores? Quae eligendi, omnis ex voluptates et. Doloribus veniam voluptatem, dolorem voluptatum, adipisci pariatur suscipit magni quas obcaecati sit fugit minima impedit sed id ex ipsa eaque beatae, dicta fuga. Quos ex laborum veniam voluptatum magni in a corrupti amet rem aspernatur obcaecati, perferendis tempore odio voluptates accusantium, eum blanditiis, sunt cum. Architecto ex quaerat, non facere iste sapiente neque a libero obcaecati debitis recusandae inventore perspiciatis at, laboriosam et officia cupiditate ducimus. Vel minus, blanditiis natus, numquam voluptates, molestias repudiandae sequi quae doloribus omnis culpa quia nisi nihil quis iure cumque est sunt aliquam nemo quas alias, sint quod ipsam dolorum. Quis, iusto officia incidunt. Esse recusandae, tenetur illo aperiam veniam laboriosam vero, nulla, voluptate expedita animi facilis repellat optio molestiae inventore ratione quisquam neque laudantium aspernatur fuga doloribus distinctio! Excepturi, voluptatem, iste! Fugit necessitatibus debitis quasi veniam iste temporibus.</div>
<div class="col col-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus nihil sunt cum consequatur aliquam error voluptate? Iste alias maiores consectetur laboriosam id aspernatur quo, dicta aliquid corporis dolore libero cumque? Eum quam nobis odio ratione autem laborum facere, accusamus inventore aperiam. Cumque saepe quis, enim eveniet, fugit temporibus. Temporibus ducimus facere explicabo incidunt modi voluptas, ut ipsum vero optio corrupti laudantium quod quia perspiciatis, praesentium ipsa mollitia placeat eveniet totam laborum. Accusamus eos veniam voluptates quaerat facere nobis quasi esse quo asperiores voluptate debitis corrupti rem dolore repudiandae aliquid quis minus id aliquam, perferendis aperiam natus modi eum numquam molestiae. Nostrum architecto molestias laborum illum maxime! Sed nam vel a suscipit minus asperiores iusto aut? Voluptas eos totam similique placeat quidem voluptatibus quod, fugit laudantium deserunt blanditiis porro vero velit, provident perspiciatis illo repudiandae! Libero eaque perferendis aspernatur consequuntur autem ipsam eos a voluptatum placeat vero maiores mollitia eius, facere! Inventore vel officia sint deleniti accusantium repellat aspernatur voluptatum repellendus dolor ipsum tempora, sed dicta nobis, odio totam asperiores mollitia quos excepturi tenetur vitae! Voluptatibus, delectus. Distinctio autem voluptates quae, fuga voluptatem. Laboriosam consequatur repudiandae aut, a consectetur est sunt blanditiis porro minima. Quaerat vero expedita dolorem voluptas, animi commodi.</div>
</div> |
|
| CSS | 1
2
3
4
5
6
7
8
9
10
| .container{
display: table;
}
.col{
display: table-cell;
padding: 20px;
}
.col-1, .col-3{
background: green;
} |
|
Демо http://codepen.io/anon/pen/wbqtu
Добавлено через 1 минуту
я тоже но с javascript очень даже, так что если нужен фолбэк напишу за 1 мин
1
|
(
Сообщение было отмечено skynet97 как решение
