Выравнивание ящиков и размеров детей

Question

Я пытаюсь сделать мои коробки 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 линии - так фиксированная высота не будет работать

Answer 1

Изменение .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.

Answer 2

проверить эту скрипку: http://jsfiddle.net/VYZEx/

я только добавил одну строку кода в CSS, он будет работать до тех пор, пока вы не возражаете, что оранжевые коробки имеют фиксированный размер, в этом случае измените это, и вы сделаете следующее:

.description { 
    background-color: orange; 
    height: 40px; 
} 

Удачи вам!

Answer 3

Там вы 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; 
} 

Я сохранил размер описания как есть, и вместо этого сделал его прокручиваемым.

Answer 4

Дайте раме .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%; 
} 

http://jsfiddle.net/PW3GV/8/

Answer 5

Вот как я бы попытаться это с помощью относительного позиционирования для .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%; }