Я бы использовал display: flex. Затем в этих согнутых полях вы можете использовать более согнутые поля.
Вы можете поменять направление сгиба на столбец, чтобы расположить содержимое по вертикали, а не по горизонтали, и выровнять элементы по ширине, чтобы сделать содержимое равным по высоте или центру. плавать содержимое в центре. Если вы соедините все это вместе, вы получите желаемый результат.
Вот как я бы это сделал:
/* GENERAL */
* {
margin: 0;
padding: 0;
box-sizing: border-box!important;
position: relative;
word-wrap: break-word;
}
@media screen and (max-width: 1023px) {
* {
text-align: center;
}
}
body {
width: 100%;
height: 100%;
}
/* END GENERAL */
.container {
width: 100%;
max-width: 1248px;
margin: 0 auto; /* centers container */
padding: 10px; /* this combined with the margin in the divs will make the margins appear consistent */
box-sizing: border-box;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row; /* sort into rows */
align-items: stretch;
justify-content: space-between;
text-align: center;
}
.container .container-inner {
width: calc((100% / 2) - 20px); /* calculate width for maximum accuracy | minus margin */
margin: 10px; /* space between boxes */
padding: 20px; /* space inside boxes */
box-sizing: border-box; /* calculates border and padding in width */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row; /* sort into columns */
align-items: center;
justify-content: center;
flex-grow: 1; /* forces singular div that falls beneath to be full width */
background-color: rgba(0,0,0,0.25);
}
@media screen and (min-width: 640px) and (max-width: 1023px) {
.container .container-inner {
width: calc((100% / 2) - 20px); /* calculate width for maximum accuracy | minus margin */
}
}
@media screen and (max-width: 639px) {
.container .container-inner {
width: 100%; /* calculate width for maximum accuracy | minus margin */
}
}
.container .container-col-one .container-content {
width: calc((100% / 2) - 20px); /* calculate width for maximum accuracy | minus margin */
margin: 10px; /* space between boxes */
padding: 20px; /* space inside boxes */
box-sizing: border-box; /* calculates border and padding in width */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: column; /* sort into columns */
align-items: center;
justify-content: center;
flex-grow: 1; /* forces singular div that falls beneath to be full width */
background-color: rgba(0,0,0,0.25);
}
@media screen and (max-width: 1023px) {
.container .container-inner {
width: 100%; /* calculate width for maximum accuracy | minus margin */
}
}
.container .container-col-two .container-content {
width: calc(100% - 20px); /* calculate width for maximum accuracy | minus margin */
margin: 10px; /* space between boxes */
padding: 20px; /* space inside boxes */
box-sizing: border-box; /* calculates border and padding in width */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: column; /* sort into columns */
align-items: center;
justify-content: center;
flex-grow: 1; /* forces singular div that falls beneath to be full width */
background-color: rgba(0,0,0,0.25);
}
h1 {
margin-bottom: 20px;
}
<section class="container">
<div class="container-col-one container-inner">
<div class="container-content">
<h1>Lorem ipsum </h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
</div>
<div class="container-content">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
</div>
</div>
<div class="container-col-two container-inner container-content">
<div>
<h1>Lorem ipsum </h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis nemo quas dolor optio autem! Veniam, dolore neque nam harum quae excepturi distinctio optio explicabo ipsum laudantium nesciunt et autem a.</p>
</div>
</div>
</section>
Я также включил несколько быстрых адаптивных настроек, чтобы вы могли понять, как их можно протолкнуть.
Надеюсь, это поможет,Джейсон.