Выровнять блоки по высоте css: html — Выровнять блоки по высоте

Leave a Comment / Css / By /

html — Выровнять блоки по высоте

Задать вопрос

Вопрос задан

Изменён 3 года 9 месяцев назад

Просмотрен 834 раза

Предварительно прошу прощения за примитивный вопрос, но я в тупике) Пытаюсь разобраться с Bootstrap 4 и сверстать примитивную карточку товаров, за пример взял сайт dodopizza.ru. У меня не получается выровнять элементы блоки по высоте. Как сделать так, чтоб блоки выравнивались по <div>, чтоб сетка выглядела так: . Данного эффекта я добился указывая height для классов good_info и good_name явно — это криво. Как добиться этого эффекта корректным способом, адаптивно, с помощью Bootstrap.

вот код: https://jsfiddle.

net/Slav4ka/eLf7283q/3/

  • html
  • css
  • css3
  • bootstrap
  • bootstrap4

Пример упростил, но принцип тот же

.wrap {
  display: flex;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  flex-basis: 0;
}

.item img {
  width: 100px;
}

.item .description {
  display: flex;
  flex-direction: column;
  align-items: center;
}
<div>
    <div>
        <div>
            <img src="https://dodopizza-a.akamaihd.net/static/Img/Products/Pizza/ru-RU/c6a8700b-b93e-43fc-945d-23b9bbfd4a7d.jpg" alt="example">
            <p>Lorem Ipsum</p>
        </div>
        <div>
            <a href="#">buy</a>
        </div>
    </div>
    <div>
        <div>
            <img src="https://dodopizza-a.
  akamaihd.net/static/Img/Products/Pizza/ru-RU/c6a8700b-b93e-43fc-945d-23b9bbfd4a7d.jpg" alt="example">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
        </div>
        <div>
            <a href="#">buy</a>
        </div>
    </div>
    <div>
        <div>
            <img src="https://dodopizza-a.akamaihd.net/static/Img/Products/Pizza/ru-RU/c6a8700b-b93e-43fc-945d-23b9bbfd4a7d.jpg" alt="example">
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
        </div>
        <div>
            <a href="#">buy</a>
        </div>
    </div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

html — Выровнять блоки div по высоте

имеется html:

<div>
    <div>
        привет андрей
        <div>внутри андр</div>
    </div>
    <div>
        привет паша
    </div>
</div>

так же есть css:

. green_fon{ /* div */
  display: inline-block;
  background: #7def72;
  font-size: 15px;
  border-top: 5px solid #001f3f;
  margin-left: 1;
  margin-right: 1;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-left: 10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
}
.blue_fon{ /* div */
  display: inline-block;
  background: #48cae2;
  font-size: 15px;
  border-top: 5px solid #001f3f;
  margin-left: 1;
  margin-right: 1;
  margin-top: 4px;
  margin-bottom: 4px;
  padding-left: 10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 10px;
}
.green_fon2{ /* div */
  display: inline-block;
  background: #7def72;
  font-size: 15px;
  border-top: 5px solid #001f3f;
  padding-left: 10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  margin-left: 1;
  margin-right: 1;
  margin-top: 5px;
  margin-bottom: 5px;
}
.class{
  box-sizing: border-box;
  border: 1px solid red;
  justify-content: space-between;
}

Не могу сделать так, чтобы эти два ‘зеленых’ были одинаковый высоты и выровнены.

желательно добиться так, чтобы они были одного класса, но это не принципиально. снаружи висит вспомогательный div, я пробовал растянуть divы внутри до его границ.

  • html
  • css

Воспользуйся flexbox’ом,

.class{
display: flex;
justify-content: space-between;
}

после этого элементы станут в одну линию. затем.. удалите margin везде, у вас будет что-то типа

[1]: https://i.stack.imgur.com/RLJpw.png

затем напишите в хтмл вместо => а второй класс станет таким => в css добавьте:

.first{
display: flex;
justify-content: start-end;
margin-right: 10px;
}

Например, так

1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

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

html — выравнивание встроенных блоков одинаковой высоты

Задавать вопрос

спросил

9 лет, 6 месяцев назад

Изменено 9 лет, 6 месяцев назад

Просмотрено 9к раз

Я хочу выровнять несколько четных встроенных блоков, как показано ниже:

 _____ _____ _____ _____
       | | | | | | | |
       | 1 | | 2 | | 3 | | 4 |
       |_____| |_____| |_____| |_____|
                _____ _____
               | | | |
               | 5 | | 6 |
               |_____| |_____|

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

Ссылка JS Fiddle

Как я могу решить эту проблему?

  • HTML
  • CSS

1

Добавьте vertical-align: top в свой код CSS.

 .запись
{
    дисплей: встроенный блок;
    верхняя граница: 10px;
    ширина: 100 пикселей;
    высота: 60 ​​пикселей;
    заполнение сверху: 40px;
    граница: 1px сплошной красный;
    вертикальное выравнивание: сверху; /* добавлен */
}

Рабочая скрипка

использование вертикальное выравнивание: сверху; для элементов встроенного блока — http://jsfiddle.net/5JSAG/49/

Попробуйте так:

 .entry
{
дисплей: встроенный блок;
верхняя граница: 10px;
ширина: 100 пикселей;
высота: 60 ​​пикселей;
заполнение сверху: 40px;
граница: 1px сплошной красный;
вертикальное выравнивание: сверху;
}

DEMO JSFIDDLE

Я бы рекомендовал использовать абсолютное позиционирование, чтобы освободить ваши . entry div от потока документов.

http://jsfiddle.net/TQW3D/1/

 .entry
{
    дисплей: встроенный блок;
    верхняя граница: 10px;
    ширина: 100 пикселей;
    высота: 100 пикселей;
    граница: 1px сплошной красный;
    должность: родственница;
}
.входной интервал
{
    положение: абсолютное;
    верх: 40%;
    слева:0;
    ширина:100%;
    выравнивание текста: по центру;
}

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

css — Вертикальное выравнивание текста блоков одинаковой высоты вдоль общей базовой линии (поддержка смешанного размера шрифта) выровненный с гармонией, вдоль базовой линии.

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

Я пробовал с Flexbox, но не могу смешивать align-items: stretch (полная высота) и align-items: baseline (выравнивание текста)

Примечание. Текст пунктов меню находится в menu-item- label обертки, потому что я добавлю больше элементов к элементу (стрелки раскрывающегося списка, пиктограммы…), но важно выравнивание текста.

 тело {
  размер шрифта: 24px; /* Большое значение для облегчения выделения неправильного выравнивания */
}
.некоторый-существующий-контейнер {
  /* Этот контейнер имеет некоторые размеры: я не думаю, что это вызовет конфликт. */
  ширина: 100%;
  высота: 4см;
  дисплей: гибкий;
  выравнивание элементов: по центру; /* Не обязательно */
  граница: 1px сплошной синий; /* Подсветка */
}
.меню {
  дисплей: гибкий;
  элементы выравнивания: базовый уровень;
  граница: 1px сплошной зеленый; /* Подсветка */
}
. пункт меню {
  граница: 1px пунктирная коричневая; /* Подсветка */
}
.меню-элемент: наведите {
  цвет фона: серый; /* Подсветка */
}
.меню-элемент-метка {
  граница: 1px пунктирная розовая; /* Подсветка */
}
.другой {
  поле слева: авто; /* Помещает этот блок справа в .some-existing-container */
  граница: 1px сплошной фиолетовый; /* Подсветка */
}
.больше {
  размер шрифта: 4rem;
}
.растянутый {
  выравнивание элементов: растянуть;
} 
 
Вариант 1: Тексты выровнены, но элементы не занимают всю высоту:

<дел>
  <дел>
    <дел>
      <дел>
        <дел>
          Дом
<дел> <дел> Товар1