Я создал флекс-бокс, см. Ссылку на кодовую ссылку здесь: - https://codepen.io/scottYg55/pen/zYYWbJG.
Я хочу, чтобы розовые фоны этого флексбокса имели высоту 50%, а фоновое изображение - 50%, поэтомувыглядит больше как сетка.
По какой-то причине розовый BG не расширяет свою ширину, независимо от того, что я пытаюсь, я просто хочу, чтобы изображения и Pink BG имели одинаковую высоту. Может быть, CSS-сетка будет лучше?
Если бы кто-то мог помочь, это было бы здорово!
HTML
<div class="blog-contl row">
<div class="col">
<div class="blog-half">
<div class="blog-half-img" style="background-image:url('http://www.project-progress.co.uk/cloudhouse/site/wp-content/uploads/blog6.jpg')">
</div>
<div class="blog-half-cont">
<h4>Test Post 12</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<div class="main-button">
<a href="http://www.project-progress.co.uk/cloudhouse/site/test-post-12/" title="Read More" class="btn-default">Read More</a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="blog-half">
<div class="blog-half-img" style="background-image:url('http://www.project-progress.co.uk/cloudhouse/site/wp-content/uploads/blog3.jpg')">
</div>
<div class="blog-half-cont">
<h4>Test Post 9</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<div class="main-button">
<a href="http://www.project-progress.co.uk/cloudhouse/site/test-post-9/" title="Read More" class="btn-default">Read More</a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="blog-half">
<div class="blog-half-img" style="background-image:url('http://www.project-progress.co.uk/cloudhouse/site/wp-content/uploads/blog6.jpg')">
</div>
<div class="blog-half-cont">
<h4>Test Post 6</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
<div class="main-button">
<a href="http://www.project-progress.co.uk/cloudhouse/site/test-post-6/" title="Read More" class="btn-default">Read More</a>
</div>
</div>
</div>
</div>
</div>
CSS
.row {display:flex;}
.blog-contl img {width:auto;}
.blog-contl .row {
display: flex;
flex-wrap: wrap;
}
.blog-contl .col {padding:0;}
.blog-half {
}
.blog-half-img {
background-size: cover;
background-repeat: no-repeat;
width: 100%;
padding-bottom: 50%;
}
.blog-half-cont {
background: #da55c9;
margin: 0;
padding: 40px;
box-sizing: border-box;
text-align: center;
color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
}
.blog-half {display:flex;flex-wrap:wrap;}
.col:nth-of-type(2) .blog-half .blog-half-cont {
order:1;
}
.col:nth-of-type(2) .blog-half .blog-half-img {
order:2;
}
Спасибо!