html — Выровнять блоки div по высоте
Вопрос задан
Изменён 2 года назад
Просмотрен 236 раз
имеется 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;
}
Например, так
Зарегистрируйтесь или войдите
Регистрация через Google
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
html — Выровнять блоки по высоте
Задать вопрос
Вопрос задан
Изменён 3 года 11 месяцев назад
Просмотрен 912 раз
Предварительно прошу прощения за примитивный вопрос, но я в тупике) Пытаюсь разобраться с 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
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Вертикальное выравнивание тега заголовка с фиксированной высотой с помощью CSS
Задавать вопрос
спросил
Изменено 10 лет, 3 месяца назад
Просмотрено 4к раз
У меня есть тег заголовка с фиксированной шириной, который в некоторых случаях будет содержать 2 строки текста, в некоторых случаях 1.
Я надеюсь сделать это без изменения разметки.
Это две строки текста
Это 1 строка
Это две строки текста
Это 1 строка
Это две строки текста
Это 1 строка
Это две строки текста
Это 1 строка
CSS:
h2 {
плыть налево;
поле: 5px;
отступ: 5px;
ширина: 100 пикселей;
высота: 50 пикселей;
вертикальное выравнивание: посередине; /*obvi не работает, потому что это не встроенный элемент */
выравнивание текста: по центру;
фон:#336699;
цвет:#fff;
}
Может быть… как селектор CSS, который определяет 2 разных свойства заполнения на основе автоматической высоты? Например, если я установил высоту на авто, и если тег заголовка превышает 60 пикселей (что было бы для 2 строк), то сделайте отступ 
…
h2[высота>60px] { padding:10px 0px; }
h2[высота <60px] { padding:20px 0px; }
Надеюсь, это имеет смысл. Я просто не уверен, как это написать... или есть лучший способ?
См. пример.
http://jsfiddle.net/KcD3v/
Большое спасибо SO
- css
- заголовок
- вертикальное выравнивание
3
Вы можете попробовать сделать что-то вроде этого:
HTML
Это две строки текста
Это 1 строка
Это две строки текста
Это 1 строка
Это две строки текста
Это 1 строка
Это две строки текста
Это 1 строка
CSS
.заголовок {
отображение: встроенная таблица; /* IE8+, Chrome, FF3+, Opera7+ */
}
ч2 {
отображение: таблица-ячейка;
поле: 5px;
отступ: 5px;
ширина: 100 пикселей;
высота: 50 пикселей;
вертикальное выравнивание: посередине;
выравнивание текста: по центру;
фон:#336699;
цвет:#fff;
}
Таким образом, вы можете использовать таблицы без нарушения семантики веб-сайта.
См. MDN для получения дополнительной информации о отображении и стилях таблиц.
Однако обычно только один элемент на странице используется для определения заголовка страницы веб-сайта, затем все остальные комбинации элементов .
Если вам не нужна кросс-браузерная совместимость (например, если вы разрабатываете расширение/веб-приложение для Chrome/Firefox), интересной альтернативой может стать даже новый flexbox.
Другим способом может быть изменение vertical-align в вашем коде на line-height , установленное на высоту вашего элемент, но в этом случае вы ограничитесь одной строкой текста.
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
css - Вертикальное выравнивание по центру div с неизвестной высотой
спросил
Изменено 6 лет, 5 месяцев назад
Просмотрено 3к раз
Я пытаюсь решить проблему вертикального выравнивания , связанную с плавающими элементами div.
Все высоты неизвестны - потому что они неявно формируются только внутренними строками текста.
Вот код: https://jsfiddle.net/zjzyryae/
# тест {
фон: желтый;
отображение: встроенный блок;
}
#блок1 {
плыть налево;
отображение: встроенный блок;
цвет фона: серый;
}
#блок2 {
цвет фона: зеленый;
плыть налево;
} <дел>
<дел>
тест
тест
тест
тест
тест
тест
тест
тест
тест
тест
Подобные примеры, которые я рассматривал, были другими.
net/zjzyryae/1/