1

возникла проблема с выравниванием ширины блока по наибольшему в колонке. Вот как это выглядит на данный момент: введите сюда описание изображения

Нужно чтобы и нижний блок был шириной с верхний.

2 ответа 2

1

Самый просто пример - обернуть эти элементы divом и задать им (этим элементам) width: 100% - тогда они будут шириной с родителя.

.width {
  display: inline-block;
  width: auto;
}

.elem {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 50px;
  background: blue;
  color: #fff;
  box-sizing: border-box;
}
<div class="width">
  <div class="elem">asdasdasdasdasdasdasdasdasdasdasdasd</div>
  <div class="elem">asdasdasdasd</div>
</div>


Дополнил

.width {
  display: inline-block;
  width: auto;
}

.elem {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 50px;
  text-align: left;
  background: blue;
  color: #fff;
  box-sizing: border-box;
}
<div class="width">
  <button class="elem">asdasdasdasdasdasdasdasdasdasdasdasd</button>
  <button class="elem">asdasdasdasd</button>
</div>

5
  • Я пытался так сделать, но у меня не получилось, потому что ширина кнопки зависит от ширины тега <button>, а ему предшествуют другие теги. Вот мой код: imgur.com/a/GLrom6u 16 апр 2019 в 17:58
  • @Daniil Lobchenko смотри мой ответ, он рабочий. П.с. у меня просьба, зайди в мой профиль и плюсани мои отрицательные вопросы. Мне система не позволяет задавать вопросы свои. 16 апр 2019 в 18:20
  • @DaniilLobchenko, дополнил ответ кодом, где используется <button> вместо <div> и всё работает.
    – De.Minov
    16 апр 2019 в 18:31
  • @DaniilLobchenko, ошибся, для родителя нужен display: inline-block
    – De.Minov
    17 апр 2019 в 12:21
  • @CbIPoK2513 хороший вариант. 17 апр 2019 в 14:05
0

.flex {
    display: inline-flex;
    flex-direction: column;
    max-width: 400px;
}

.block {
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 20px;
    background: yellow;
    color: #222;
    box-sizing: border-box;
    word-break: break-all;
}
Пример 1:<br><br>
<div class="flex">
  <div class="block">Привет Мир, Я Супер!</div>
  <div class="block">Привет!</div>
</div>
<br><br>
Пример 2 (с добавленным третьим блоком)<br><br>
<div class="flex">
  <div class="block">Привет Мир, Я Супер!</div>
  <div class="block">Привет!</div>
  <div class="block">Я Супер человек! Супер человек!</div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.