Как я могу заставить предметы оставаться в очереди

Question

Я пытаюсь стилизовать раздел с заголовком и кнопкой внизу и хочу, чтобы кнопки оставались идеально выровненными, независимо от размера браузера (если только на мобильном телефоне в этом случае они не складываются).Из-за того, что в одном заголовке больше текста, чем в другом, при изменении размера экрана некоторые заголовки переходят от одной строки к необходимости использовать две строки, заставляя кнопку опускаться на страницу, пока другая кнопка остается.

У меня есть предметы в гибких коробках, но есть ли способ заставить их оставаться в ряд друг с другом?

-

РЕДАКТИРОВАТЬ:

Последнее, что я пробовал - это удалить кнопки и поместить их в отдельный раздел ниже.

Я также попробовал это решение здесь нацеливаясь на новый идентификатор раздела, безуспешно.

Это мой оригинальный код с проблемой.

/* Section: Clients */

#clients .items {
  display: flex;
}

#clients .items img {
  display: block;
  position: center;
  margin: auto;
  width: 50%;
}

#clients .cr {
  position: relative;
  min-width: 29%;
  max-width: 30%;
  height: auto;
  text-align: center;
  padding-top: 0px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: 30px;
}

#clients .cr-last {
  position: relative;
  min-width: 29%;
  max-width: 30%;
  height: auto;
  text-align: center;
  padding-top: 0px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: 30px;
}

#clients .client-r {
  margin-right: 50px;
}

#clients .cr-btn {
  background-color: #4C9FCF;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

<!-- Section: Client Resources -->
<section id="clients" class="py-1">
  <div class="container">
    <h2 class="m-heading text-center">
      <span id="client-r" class="text-primary">Client</span> Resources
    </h2>
    <div class="items py-1">
      <div class="cr">
        <h2>
          TD Ameritrade Access
          <p></p>
        </h2>
        <button class="cr-btn">LOGIN</button>
      </div>
      <div class="cr">
        <h2>
          American Equity Access
          <p></p>
          <button class="cr-btn">LOGIN</button>
        </h2>
      </div>
      <div class="cr-last">
        <h2>
          American Equity Access
          <p></p>
          <button class="cr-btn">LOGIN</button>
        </h2>
      </div>
    </div>
  </div>
</section>

Answer 1

Отзывчивое решение

Другое решение - добавить flex-direction: row и justify-content: center к элементу #clients .items, чтобы сделать его относительно ширины окна.

Ваш #clients .items элемент css должен выглядеть следующим образом:

#clients .items {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

А в вашем #clients .cr просто добавьте width: 100% и удалите max-width: 30%.После этого ваш элемент css будет выглядеть так:

#clients .cr {
  position: relative;
  /* min-width:29%; */
  width: 100%;
  height: auto;
  text-align: center;
  padding-top: 0px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: 30px;
}

И ваши элементы тоже будут отзывчивыми.

Я сделал JSFiddle: Пример JSFiddle

Answer 2

Сделайте это со своими элементами,

display: inline-block;

Это склеит их и выстроит в линию.

Answer 3

Добавьте margin-top: auto; к кнопкам.Это приведет к тому, что они упадут на дно flexbox.

Поскольку кода нет, трудно понять, будет ли это решение работать правильно и делать некоторые предположения относительно вашего кода.

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.row {
  display: flex;
  max-width: 500px;
}

.card {
  display: flex;
  flex-direction: column;
  width: 33.33333%;
  padding: 1rem;
}

.button {
  align-self: center;
  margin-top: auto; /* This is the magic. */
  padding: 1rem;
  background-color: skyblue;
}

<div class="row">

  <div class="card">
    <h2>Title Short</h2>
    <div class="button">Button</div>
  </div>

  <div class="card">
    <h2>Title Long Title Long Title Long</h2>
    <div class="button">Button</div>
  </div>

  <div class="card">
    <h2>Title Short</h2>
    <div class="button">Button</div>
  </div>

</div>

Answer 4

Тэг inline-block, такой как

<div>
<div id="div1" style="display: inline-block">Content1</div>
<div id="div2" style="display: inline-block">Content2</div>
</div>

, должен обычно приводить два элемента div рядом друг с другом.Не видя / не пробуя свой реальный код, сложно сказать точно, как это сделать в соответствии с вашими мобильными требованиями.Существует метатег для области просмотра, подобный следующему, который решает многие проблемы мобильного стиля:

<meta name="viewport" content="width=device-width, initial-scale=1">

Если это не то, что вы намереваетесь в результате, что вы на самом деле хотели бы, чтобы divделать, когда экран слишком маленький?Должен ли один из них исчезнуть?Кроме того, у вас могут быть некоторые другие стили на вашей странице, которые вызывают дополнительное пространство (поля, отступы, другие элементы div или другие элементы), которые могут вызвать дополнительные пробелы, которые вы не ожидаете.

Answer 5

Похоже, что вы хотите достичь, можно сделать с помощью свойства flex-wrap.Вы хотите установить его значение на nowrap.

flex-wrap: nowrap

. Подробнее об этом можно прочитать на сайте документации MDN, который можно найти по ссылке ниже:

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap