Я пытаюсь сделать свои div
боксы.
Я хочу, чтобы оранжевые ящики имели одинаковый размер, расширяя меньшие до той же высоты, что и самая большая.
Я также хочу, чтобы тот, который был на втором ряду, соответствовал правильно, влево идеально выровнен.
HTML
<div class="picture">
<div class="image"></div>
<div class="description">A description</div>
</div>
<div class="picture">
<div class="image"></div>
<div class="description">A description <br /> Extra line</div>
</div>
<div class="picture">
<div class="image"></div>
<div class="description">A description</div>
</div>
<div class="picture">
<div class="image"></div>
<div class="description">A description</div>
</div>
<div class="picture">
<div class="image"></div>
<div class="description">A description</div>
</div>
CSS:
.picture {
width: 20%;
margin: 5px;
float: left;
}
.image {
width: 100%;
height: 200px;
background-color: chartreuse;
}
.description {
background-color: orange;
}
JSFiddle с проблемой: http://jsfiddle.net/PW3GV/1/
редактировать
Оранжевые ящики могут иметь разную высоту. Иногда он может содержать 1 строку, 2 строки или 3 строки, поэтому фиксированная высота не будет работать
Вот как я попытался бы это сделать, используя относительное позиционирование для.picture и абсолютного позиционирования для.description.
См. Мой jsfiddle: http://jsfiddle.net/PW3GV/9/
.picture { width: 20%; margin: 5px; float: left; position:relative; }.description { background-color: orange; position:absolute; bottom:0; width:100%; }
Измените ширину .picture
до 18.484%, как показано ниже:
.picture {
width: 18.484%;
margin: 5px;
float: left;
}
.description {
background-color: orange;
}
И добавьте скрипт jQuery, как показано ниже:
function equalHeight(group) {
var tallest = 0;
group.each(function() {
var thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function() {
equalHeight($(".description"));
});
См. Обновленную версию jfiddle.
Дайте рамке .picture
относительное позиционирование, сделайте положение описания относительным и поместите его в нижнюю часть рамки .picture
затем дайте ему 100% ширину, чтобы захватить весь контейнер.
.picture {
width: 20%;
margin: 5px;
float: left;
position: relative;
}
.image {
width: 100%;
height: 200px;
background-color: chartreuse;
}
.description {
background-color: orange;
position:absolute;
bottom:0;
width:100%;
}
Там вы JSFiddle надеетесь, на что вы нацелились;
.picture {
width: 18.5%;
margin: 5px;
float: left;
}
.image {
width: 100%;
height: 200px;
background-color: chartreuse;
}
.description {
background-color: orange;
height: 20px;
overflow: auto;
cursor: pointer;
text-align: center;
}
.description::-webkit-scrollbar{
display: none;
}
Я сохранил размер описания как есть, и вместо этого сделал его прокручиваемым.
проверьте эту скрипту: http://jsfiddle.net/VYZEx/
Я просто добавил одну строку кода в css, она будет работать до тех пор, пока вы не против, чтобы оранжевые ящики имели фиксированный размер, в этом случае измените это, и вы сделаете следующее:
.description {
background-color: orange;
height: 40px;
}
Удачи!