Как сделать 3 разных текстовых поля одинаковой высоты (в отзывчивом состоянии)
Я использую Bootstrap V3.3.5. Экран разделен на 3 горизонтальных столбца. Каждый столбец имеет разную длину текста, которая может быть изменен пользователем.
Столбцы адаптивные горизонтальные (от Bootstrap).
Цель ... как исправить: мне нужен такая же высота для этих трех столбцов - ящиков. Каждый блок-столбец должен иметь высоту самого высокого блока-столбца .... так что все блоки-столбцы имеют одинаковую высоту.
Кроме .... в Bootstrap режиме "хз" ящики вертикальные (нет проблем). Проблема в режиме "sm, md и lg" (Bootstrap), когда столбцы расположены горизонтально рядом друг с другом.
Обновлено:
Я думал, что проблема в текст, но похоже, что это кнопка начальной загрузки МОДАЛЬНЫЙ ... поэтому я не поместил модальный код в первый код.
Я так и сделал: разместил style = "white-space: normal;" (чтобы уместить текст в модальном) - похоже, есть конфликт с этим стилем
В розыске:
- Модальный высота кнопок такой же в режиме начальной загрузки sm, md, lg (высота самой большой кнопки)
- Текст начинается с одинаковой высоты
- Текст по размеру кнопки
Смотрите фрагмент в полноэкранном режиме!
Код:
<!doctype html>
<html>
<head>
<style>
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
@media (max-width: 768px) {
.row {
flex-wrap: wrap;
}
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}
</style>
<meta charset = "utf-8">
<title>Untitled Document</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin = "anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin = "anonymous">
<!-- Optional theme -->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity = "sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin = "anonymous">
</head>
<body>
<!-- BootsTrap V 3.3.5 -->
<div class = "container-fluid">
<div class = "row RowHeight" >
<div class = "col-xs-12 col-sm-3">
<!-- Button trigger modal -->
<button type = "button" class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal_1" style = "white-space: normal;">
Launch demo modal 11 11 111 111
</button>
<!-- Modal -->
<div class = "modal fade" id = "myModal_1" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel_1">
<div class = "modal-dialog" role = "document">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close"><span aria-hidden = "true">×</span></button>
<h4 class = "modal-title" id = "myModalLabel_1">Modal title</h4>
</div>
<div class = "modal-body">
...
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">Close</button>
<button type = "button" class = "btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div> </div><!-- col2 -->
<!-- Button trigger modal (end) -->
<div class = "col-xs-12 col-sm-3">
<!-- Button trigger modal -->
<button type = "button" class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal_2" style = "white-space: normal;">
Launch demo modal 2222 222 222 222 222 222 222 22222222 22 22222 2222
</button>
<!-- Modal -->
<div class = "modal fade" id = "myModal_2" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel_2">
<div class = "modal-dialog" role = "document">
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close"><span aria-hidden = "true">×</span></button>
<h4 class = "modal-title" id = "myModalLabel_2">Modal title</h4>
</div>
<div class = "modal-body">
...
</div>
<div class = "modal-footer">
<button type = "button" class = "btn btn-default" data-dismiss = "modal">Close</button>
<button type = "button" class = "btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div> </div><!-- col2 -->
<!-- Button trigger modal (end) -->
</div>
</div>
</body>
</html>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
0
301
4
Ответы 4
Самое простое решение - присвоить жестко запрограммированную высоту вашему классу "бокса" на основе самого высокого столбца-бокса, например:
.box {
height: 300px;
}
Другим решением может быть вычисление самой высокой высоты поля столбца с помощью JavaScript и динамическое присвоение той же высоты другим двум полям, также через JS.
Используйте flexbox для этого, вы можете легко получить одинаковую высоту для всех .box на основе столбца максимальной высоты, я сделал короткий пример на основе вашего кода, посмотрите:
.box {
background-color: lightgray;
margin-left: 10px;
}
.row{
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.row > [class*='col-'] {
display: flex;
flex-direction: column;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity = "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin = "anonymous">
<!-- Optional theme -->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity = "sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin = "anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity = "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin = "anonymous"></script>
<body>
<!-- BootsTrap V 3.3.5 -->
<div class = "container-fluid">
<div class = "row" >
<!-- for test! -->
<div class = "col-xs-4 col-sm-4 box">
<p> Lorem ipsum dolor sit amet</p>
</div>
<div class = "col-xs-4 col-sm-4 box">
<p> Lorem ipsum dolor sit amet, consec tetuer adipiscing consec elit.</p>
</div>
<div class = "col-xs-4 col-sm-4 box">
<p> Lorem ipsum dolor sit amet, consec tetuer adipis cing elit. Aenean commodo ligula eget dolor. Aenean massa cing.</p>
</div>
</div>
</div>
</body>Вы также можете попробовать вот так:
.box {
background-color: lightgray;
padding: 5px 10px;
min-height: 200px;
}
@media (max-width: 768px) {
.box {
min-height: auto;
margin-bottom: 15px;
}
}<link href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel = "stylesheet"/>
<div>
<!-- for test! -->
<div class = "col-xs-12 col-sm-4">
<div class = "box">
<p> Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class = "col-xs-12 col-sm-4">
<div class = "box">
<p> Lorem ipsum dolor sit amet, consec tetuer adipiscing consec elit.</p>
</div>
</div>
<div class = "col-xs-12 col-sm-4">
<div class = "box">
<p> Lorem ipsum dolor sit amet, consec tetuer adipis cing elit. Aenean commodo ligula eget dolor. Aenean massa cing.</p>
</div>
</div>
</div>Можете ли вы добавить это в свою функцию onload `
var heighest = document.getElementsByClassName("box")[0].offsetHeight;
for(i = 1;i<3; i++){
if (heighest < document.getElementsByClassName("box")[i].offsetHeight){
heighest = document.getElementsByClassName("box")[i].offsetHeight;
}
}`
После этого вы можете использовать heighest
.box {
background-color: lightgray;
height: heighest;
}
Другие вопросы по теме
Изменение стиля, заданного классами начальной загрузки
@media запрос не работает на iPhone
Как сделать встроенные элементы ВНУТРЕННИМИ встроенными внутри flexbox
Поместите Div в Div, а также используйте Clear: обе проблемы
Добавленный пользовательский класс анимации в div не работает?
Почему в моем Chrome есть горизонтальная полоса прокрутки даже после использования начальной загрузки
Как получить зигзагообразную границу с цветом фона и другим цветом контура?
Как динамически добавлять разрыв страницы, если печать достигает второй страницы
Добавление плавной прокрутки в bootstrap 4.1 (при использовании scrollspy)?
Как сделать так, чтобы кнопка добавления в корзину выглядела как это изображение с помощью css?
Похожие вопросы
Почему непрозрачность svg меняет значения RGB
Изменение стиля, заданного классами начальной загрузки
Сгенерируйте pdf из функции jquery и хотите сохранить его на моем сервере
Заменить URL, если слово начинается с
Может ли объект event.detail содержать более одного значения? (Vanillatree.js)
Разбор html для получения только определенных тегов
Админ или панель управления
Как сделать встроенные элементы ВНУТРЕННИМИ встроенными внутри flexbox
Добавленный пользовательский класс анимации в div не работает?
Отправка переменных js в файл php через html