Как мне сохранить два соседних элемента одинаковой высоты?
CASE WHEN a.fieldname IS NULL
THEN 0
ELSE a.fieldname
END AS fieldname
7 ответов
, вы можете легко использовать jQuery.
CSS
.left, .right {border:1px solid #cccccc;}
jQuery
$(document).ready(function() {
var leftHeight = $('.left').height();
$('.right').css({'height':leftHeight});
});
HTML
<div class="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada, lacus eu dapibus tempus, ante odio aliquet risus, ac ornare orci velit in sapien. Duis suscipit sapien vel nunc scelerisque in pretium velit mattis. Cras vitae odio sed eros mollis malesuada et eu nunc.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet.</p>
</div>
Вам потребуется включить jQuery
Вы можете использовать плагин Equal Heights JQuery для выполнения, этот плагин делает все div точно такой же высоты, как и другие. Если один из них вырастет, будет расти и другой.
Вот пример реализации
Usage: $(object).equalHeights([minHeight], [maxHeight]);
Example 1: $(".cols").equalHeights();
Sets all columns to the same height.
Example 2: $(".cols").equalHeights(400);
Sets all cols to at least 400px tall.
Example 3: $(".cols").equalHeights(100,300);
Cols are at least 100 but no more than 300 pixels tall. Elements with too much content will gain a scrollbar.
Вот ссылка
Это область, где CSS никогда не имел решений - вам остается использовать теги Это работает во всех версиях Firefox, Chrome и Safari, Opera, по крайней мере, с версии 8, и в IE с версии 8. Это обычная проблема, с которой сталкивались многие, но, к счастью, некоторые умные умы, такие как Эд Элиот в его блоге , опубликовали свои решения в Интернете. В основном вы делаете оба блока / столбца очень высокими, добавляя Я здесь изменил высоту на минимальную высоту и дал ей фиксированная стоимость. если размер одного из них будет изменен, высота другого останется прежней. не уверен, что вы хотите Вы можете использовать Faux Columns. По сути, это использование фонового изображения в содержащем DIV для имитации двух одинаковых по высоте DIV. Использование этой техники также позволяет добавить тени, закругленные углы, пользовательские границы или другие забавные узоры к вашим контейнерам. Работает только с контейнерами фиксированной ширины. Хорошо протестировано и работает во всех браузерах. Используя jQuery, вы можете сделать это в очень простом однострочном скрипте. Это немного интереснее. Этот метод называется Faux Columns . Более или менее вы на самом деле не устанавливаете одинаковую фактическую высоту, но вы настраиваете некоторые графические элементы так, чтобы они выглядели одинаковой высоты. (или подделывать их с помощью значений CSS
display:table*), так как это единственное место, где реализовано "держать кучу элементов одинаковой высоты".
<div style="display: table-row;">
<div style="border:1px solid #cccccc; display: table-cell;">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div style="border:1px solid #cccccc; display: table-cell;">
Some content!
</div>
</div>
padding-bottom: 100% , а затем «обманываете браузер», заставляя думать, что они не такие высокий с использованием margin-bottom: -100% . Это лучше объяснил Эд Элиот в своем блоге, который также включает множество примеров. .container {переполнение: скрыто; } .column {float: left; маржа: 20 пикселей; цвет фона: серый; padding-bottom: 100%; нижняя маржа: -100%; }
Некоторое содержание!
Некоторое содержание!
Некоторое содержание!
Некоторое содержание!
<div>
<div style="border:1px solid #cccccc; float:left; min-height:200px;">
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
Some content!<br/>
</div>
<div style="border:1px solid #cccccc; float:left; min-height:200px;">
Some content!
</div>
</div>
Использование jQuery
// HTML
<div id="columnOne">
</div>
<div id="columnTwo">
</div>
// Javascript
$("#columnTwo").height($("#columnOne").height());
Использование CSS
Похожие вопросы: