Есть 2 блока, в каждом из которых есть по картинке, по заголовку и по описанию.
Выглядит это так
Как можно сделать так без JS, JQUERY, FLEXBOX? В данном проекте использую display: table;
.cards {
display: table;
margin-top: 45px;
}
.card {
width: 45%;
text-align: center;
display: table-cell;
vertical-align: top;
height: 100%;
position: relative;
}
.card-mg {
width: 10%;
height: 100%;
}
.card-padding {
height: 100%;
padding: 0 5% 0 5%;
}
.card img {
width: 100%;
}
.card h1 {
font-weight: 300;
margin: 5% 0 5% 0;
}
.card h4 {
font-weight: 100;
}
<div class="cards">
<div class="card card1">
<img src="https://i.stack.imgur.com/FFwoT.jpg" alt="">
<div class="card-padding">
<h1>HEADING</h1>
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, praesentium.</h4>
</div>
</div>
<div class="card-mg">
</div>
<div class="card card1">
<img src="https://i.stack.imgur.com/PPzLT.jpg" alt="">
<div class="card-padding">
<h1>HEADING</h1>
<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non, praesentium.</h4>
</div>
</div>
</div>
html
, к посту, и использовали быurl
картинок уже со странички данного поста. Ибо политика не позволяет грузить картинки со сторонних сайтиков, и ваш пример не воспроизводится как нужно... – selya 7 мар '18 в 21:45