Сохраняйте одинаковую ширину столбцов flexbox при добавлении поля

У меня есть следующий двухколоночный макет с использованием 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>, но я надеюсь, что есть более эффективный способ.


html css flexbox
person Sam    schedule 08.01.2020    source источник
comment
Используйте отступы вместо полей   -  person Laif    schedule 08.01.2020
comment
Я пробовал как поля, так и отступы, оба с тем же эффектом.   -  person Sam    schedule 08.01.2020
comment
Обратите внимание, что flex: 1; сама по себе не делает столбцы одинаковой ширины, несмотря на то, что прокомментировано в вашем коде. Flexbox не совсем для этого. Почему бы не использовать сетку?   -  person Laif    schedule 08.01.2020
comment
Чего вы пытаетесь достичь здесь?   -  person Marc Hjorth    schedule 08.01.2020
comment
Это работает, если вы сделаете пример кода полноэкранным. Может быть, у вас есть решение?   -  person Sam    schedule 08.01.2020
comment
@Sam Вы бы согласились просто изменить свой код на сетку CSS в качестве решения? на самом деле не отвечает на проблему, которая была задана.   -  person Laif    schedule 08.01.2020
comment
@MarcHjorth Я пытаюсь добавить поле во второй столбец, чтобы дать тексту передышку. Этого можно добиться, добавив контейнер <div class="content"> во второй столбец, как показано в моем вопросе. Я хотел бы избежать этого, если это возможно.   -  person Sam    schedule 08.01.2020
comment
@Laif Я бы хотел использовать сетку CSS, но она должна работать в старых браузерах.   -  person Sam    schedule 08.01.2020
comment
Я не понимаю, почему вы так себя чувствуете, но вы всегда можете настроить таргетинг на текстовую колонку с помощью CSS, используя nth-child или last-of-type, если это то, что вы ищете.   -  person Marc Hjorth    schedule 08.01.2020
comment
@MarcHjorth Я не могу получить доступ к серверной части этого проекта, поэтому добавление <div class="content"> не вариант. Таргетинг с помощью nth-child не решает проблему.   -  person Sam    schedule 08.01.2020
comment
Я обновил свой вопрос, так что, надеюсь, он немного понятнее.   -  person Sam    schedule 08.01.2020
comment
Думаю, теперь я понимаю вашу проблему. Вы можете настроить таргетинг на все внутри текстового столбца, используя * — например, .column:last-of-type > *. Я сделал пример здесь JSFiddle.   -  person Marc Hjorth    schedule 08.01.2020

Ответы (1)


arrow_upward
1
arrow_downward

Возможно, flex-basis может помочь:

body {
  margin: 0;
}

html {
	box-sizing: border-box;
}

.grid {
  display: flex;
}

.column {

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.one {
  flex-basis: 50%
}

.two {
  flex: 1;
  margin: 0 10vw;
}

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 one">
    <img src="https://hackernoon.com/hn-images/1*mONNI1lG9VuiqovpnYqicA.jpeg" alt="Bad Ass Cat">
  </div>
    <div class="column two">

        <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>

person Liveindream    schedule 08.01.2020
comment
Я думаю, проблема в том, что он не может добавить дополнительные классы в DOM, так как он исходит из бэкэнда, к которому у него нет доступа. (Иначе я бы сделал то же, что и ты. ;)) - person konrad_pe; 08.01.2020
comment
Там написано, что это всего лишь двухколоночный макет, так почему бы не .grid .column:first-of-type { flex-basis: 50% } и .grid .column:last-of-type { flex: 1; margin: 0 10vw; }? - person chris; 08.01.2020
comment
Это отличное решение, спасибо. Спасибо всем, кто внес свой вклад, и вашему терпению. - person Sam; 08.01.2020