IE11 реализация 2-ух колонок одинаковых по высоте
332
25 декабря 2016, 19:09
Мне нужно несколько колонок в ряд, одинаковых по высоте и высота подстраивается под максимальный по высоте элемент. Реализовал известным образом:
.row-flex, .row-flex > div[class*='col-'] {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex:1 1 auto;
}
.row-flex-wrap {
-webkit-flex-flow: row wrap;
align-content: flex-start;
flex:0;
}В большинстве браузеров кроме ie11 работает корректно:
Но в ie11 вот такая беда: Как решить эту проблему? От способа организации высоты колонок отказываться не хочется, может кто-то решал подобные проблемы?
.post {
width: 100%;
border: 1px solid #e1e1e1;
border-top: none;
}
.post__marbot {
margin-bottom: 66px;
}
.post__img {
position: relative;
width: 100%;
overflow: hidden;
margin-bottom: 40px;
height: auto;
}
.post__img img {
height: auto;
width: 100%;
}
.post__tags {
right: 58px;
top: 44px;
}
.post__pad {
padding: 0px 60px 0px 70px;
}
.post__title {
font-size: 33px;
line-height: 43px;
font-weight: 400;
font-stretch: extra-condensed;
letter-spacing: 5px;
}
.post__title-pos {
margin-top: 7px;
margin-bottom: 20px;
}
.post__article {
color: #010101;
font-size: 15px;
font-weight: 300;
line-height: 25px;
letter-spacing: 1px;
}
.post__article-pos {
margin-bottom: 26px;
}
.post__read {
display: inline-block;
border: 1px solid #e1e1e1;
padding: 9px 36px;
color: #a7a7a7;
font-size: 15px;
letter-spacing: 3px;
}
.post__read-pos {
margin-bottom: 88px;
}
.post__data {
padding-bottom: 42px;
}
.post__older {
width: 100%;
display: block;
font-size: 18px;
font-weight: 400;
color: #fff;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
background-color: #555;
letter-spacing: 3px;
}
.post__older i {
margin-left: 8px;
}
.post__older:hover {
color: white;
}<div class="post__container">
<div class="row delete-pad-mar row-flex row-flex-wrap">
<div class="col-xs-12 delete-pad-mar post__marbot col-sm-6 post-2-pad">
<div class="post frame__block">
<div class="frame__top">
<div class="post__img">
<a href=""><img src="img/post1-2col.jpg" alt=""></a>
<div class="tags post__tags main-text"><a href="">TRAVEL</a><a
href="">LIFESTYLE</a>
</div>
</div>
<div class="post__pad">
<a href="" class=""><h3
class=" post__title post__title-pos hover__title main-text ">10 LIFE
CHANGING
MOMENTS FROM 10 YEARS</h3></a>
<p class="post__article post__article-pos main-textLato ">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud
</p>
</div>
</div>
<div class="post__data spotlight__data main-text spotlight__pad frame__bottom post__pad">
<a href=""
class="post__read post__read-pos main-text hidden-xs hover__link">Read
more</a>
<div class="post__data1">
<div class="spotlight__comm hover__data "><a href="">
<i class="fa fa-comment-o" aria-hidden="true"></i><span class="">5</span></a>
</div>
<span><span class="spotlight__date">On OCTOBER 16, 2016</span>by <a href=""><span
class="spotlight__author hover__data">MARCO</span></a>
</span>
</div>
</div>
</div>
</div>
<div class="col-xs-12 delete-pad-mar post__marbot col-sm-6 post-2-pad">
<div class="post frame__block">
<div class="frame__top">
<div class="post__img">
<a href=""><img src="img/post2-2col.jpg" alt=""></a>
<div class="tags post__tags main-text"><a href="">TRAVEL</a><a
href="">LIFESTYLE</a>
</div>
</div>
<div class="post__pad">
<a href="" class=""><h3
class=" post__title post__title-pos hover__title main-text ">10 LIFE
CHANGING
MOMENTS FROM 10 YEARS</h3></a>
<p class="post__article post__article-pos main-textLato ">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud
</p>
</div>
</div>
<div class="post__data spotlight__data main-text spotlight__pad frame__bottom post__pad">
<a href=""
class="post__read post__read-pos main-text hidden-xs hover__link">Read
more</a>
<div class="post__data1">
<div class="spotlight__comm hover__data "><a href="">
<i class="fa fa-comment-o" aria-hidden="true"></i><span class="">5</span></a>
</div>
<span><span class="spotlight__date">On OCTOBER 16, 2016</span>by <a href=""><span
class="spotlight__author hover__data">MARCO</span></a>
</span>
</div>
</div>
</div>
</div>
<div class="col-xs-12 delete-pad-mar post__marbot col-sm-6 post-2-pad">
<div class="post frame__block">
<div class="frame__top">
<div class="post__img">
<a href=""><img src="img/post2-2col.jpg" alt=""></a>
<div class="tags post__tags main-text"><a href="">TRAVEL</a><a
href="">LIFESTYLE</a>
</div>
</div>
<div class="post__pad">
<a href="" class=""><h3
class=" post__title post__title-pos hover__title main-text ">10 LIFE
CHANGING
MOMENTS FROM 10 YEARS</h3></a>
<p class="post__article post__article-pos main-textLato ">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud
</p>
</div>
</div>
<div class="post__data spotlight__data main-text spotlight__pad frame__bottom post__pad">
<a href=""
class="post__read post__read-pos main-text hidden-xs hover__link">Read
more</a>
<div class="post__data1">
<div class="spotlight__comm hover__data "><a href="">
<i class="fa fa-comment-o" aria-hidden="true"></i><span class="">5</span></a>
</div>
<span><span class="spotlight__date">On OCTOBER 16, 2016</span>by <a href=""><span
class="spotlight__author hover__data">MARCO</span></a>
</span>
</div>
</div>
</div>
</div>
<div class="col-xs-12 delete-pad-mar post__marbot col-sm-6 post-2-pad">
<div class="post frame__block">
<div class="frame__top">
<div class="post__img">
<a href=""><img src="img/post1-2col.jpg" alt=""></a>
<div class="tags post__tags main-text"><a href="">TRAVEL</a><a
href="">LIFESTYLE</a>
</div>
</div>
<div class="post__pad">
<a href="" class=""><h3
class=" post__title post__title-pos hover__title main-text ">10 LIFE
CHANGING
MOMENTS FROM 10 YEARS</h3></a>
<p class="post__article post__article-pos main-textLato ">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud
</p>
</div>
</div>
<div class="post__data spotlight__data main-text spotlight__pad frame__bottom post__pad">
<a href=""
class="post__read post__read-pos main-text hidden-xs hover__link">Read
more</a>
<div class="post__data1">
<div class="spotlight__comm hover__data "><a href="">
<i class="fa fa-comment-o" aria-hidden="true"></i><span class="">5</span></a>
</div>
<span><span class="spotlight__date">On OCTOBER 16, 2016</span>by <a href=""><span
class="spotlight__author hover__data">MARCO</span></a>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
-
19:13
-
16:04
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
-
17:27
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
-
22:17
-
18:08
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
-
18:54
-
17:35
-
14:27
-
21:22
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47813 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30559 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23813 visits
- Как через css изменить цвет png изображения? 10383 visits
- Blob video url download 9995 visits
- Php curl запрос через прокси с авторизацией 9257 visits
- Работа с captcha vk api 8133 visits
© "hostciti.net" 03.3.2025 | 18:46