У меня есть следующая двухколонная компоновка с использованием flexbox:
body {
margin: 0;
}
.grid {
display: flex;
}
.column {
/* Equal width columns */
flex: 1;
/* Center content */
display: flex;
flex-direction: column;
justify-content: center;
}
img {
display: block;
/* Site wide to make images responsive */
max-width: 100%;
height: auto;
/* Cover column */
width: 100%;
height: 100%;
object-fit: cover;
object-position: right center;
}
h2 {
margin: 0 0 24px;
}
p {
margin: 0 0 24px;
}
a,
a:hover,
a:visited,
a:focus {
color: #000;
}
<div class="grid">
<div class="column">
<img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg" alt="Bad Ass Cat">
</div>
<div class="column">
<h2>Here's a Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam ut ex at fermentum. Proin nec eros at elit mollis porttitor. Vivamus vestibulum luctus metus, ac gravida felis varius nec. Praesent non mauris et tortor lacinia cursus quis at turpis. Nullam scelerisque vitae leo nec convallis. Proin volutpat, est non iaculis facilisis, tellus tortor pulvinar lectus, eu porttitor diam dui eget enim. Praesent non ipsum dui.</p>
<a href="#">Click Me</a>
</div>
</div>
Как видите, столбцы одинаковы по ширине и высоте при любой ширине области просмотра.
Я бы хотел добавить поле до последнего столбца, который содержит текст. Вот что я попробовал:
body {
margin: 0;
}
.grid {
display: flex;
}
.column {
/* Equal width columns */
flex: 1;
/* Center content */
display: flex;
flex-direction: column;
justify-content: center;
}
.content {
margin: 96px;
}
img {
display: block;
/* Site wide to make images responsive */
max-width: 100%;
height: auto;
/* Cover column */
width: 100%;
height: 100%;
object-fit: cover;
object-position: right center;
}
h2 {
margin: 0 0 24px;
}
p {
margin: 0 0 24px;
}
a,
a:hover,
a:visited,
a:focus {
color: #000;
}
<div class="grid">
<div class="column">
<img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg" alt="Bad Ass Cat">
</div>
<div class="column content">
<h2>Here's a Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam ut ex at fermentum. Proin nec eros at elit mollis porttitor. Vivamus vestibulum luctus metus, ac gravida felis varius nec. Praesent non mauris et tortor lacinia cursus quis at turpis. Nullam scelerisque vitae leo nec convallis. Proin volutpat, est non iaculis facilisis, tellus tortor pulvinar lectus, eu porttitor diam dui eget enim. Praesent non ipsum dui.</p>
<a href="#">Click Me</a>
</div>
</div>
В этом примере я добавил поле в столбец .content, чтобы дать тексту некоторую передышку. Я предполагал, что flexbox будет учитывать маржу, но это не так.
Далее я попробовал следующее:
body {
margin: 0;
}
html {
box-sizing: border-box;
}
.grid {
display: flex;
}
.column {
/* Equal width columns */
flex: 1;
/* Center content */
display: flex;
flex-direction: column;
justify-content: center;
}
.content {
margin: 96px;
}
img {
display: block;
/* Site wide to make images responsive */
max-width: 100%;
height: auto;
/* Cover column */
width: 100%;
height: 100%;
object-fit: cover;
object-position: right center;
}
h2 {
margin: 0 0 24px;
}
p {
margin: 0 0 24px;
}
a,
a:hover,
a:visited,
a:focus {
color: #000;
}
<div class="grid">
<div class="column">
<img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg" alt="Bad Ass Cat">
</div>
<div class="column">
<div class="content">
<h2>Here's a Heading</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam ut ex at fermentum. Proin nec eros at elit mollis porttitor. Vivamus vestibulum luctus metus, ac gravida felis varius nec. Praesent non mauris et tortor lacinia cursus quis at turpis. Nullam scelerisque vitae leo nec convallis. Proin volutpat, est non iaculis facilisis, tellus tortor pulvinar lectus, eu porttitor diam dui eget enim. Praesent non ipsum dui.</p>
<a href="#">Click Me</a>
</div>
</div>
</div>
В этом примере я добавил тег <div class="content"> с полем в текстовом столбце. Теперь столбцы имеют одинаковую ширину в любом окне просмотра, и есть место для текста. Это то, чего я пытаюсь достичь .
Мой вопрос: К сожалению, у меня нет доступа к бэкэнду для этого проекта, поэтому я не могу добавить <div class="content"> тег для текстового столбца. Есть ли способ добавить поле для текстового столбца без добавления тега <div class="content">? Я полагаю, что могу добавить поля для своих элементов <h2>, <p> и <a>, но я надеюсь, что есть более эффективный способ.