Выравнивание ящиков и калибровка детей

0

Я пытаюсь сделать свои div боксы.

Я хочу, чтобы оранжевые ящики имели одинаковый размер, расширяя меньшие до той же высоты, что и самая большая.

Я также хочу, чтобы тот, который был на втором ряду, соответствовал правильно, влево идеально выровнен.

Изображение 174551

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

  • 0
    Вот специальная версия для вас jsfiddle.net/PW3GV/5
Теги:

5 ответов

0

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

0

Измените ширину .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.

  • 0
    Добавлена правка внизу поста
  • 0
    @Maeh Должен работать сейчас. Ответ обновлен и скрипка тоже.
0

Дайте рамке .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/

0

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

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

0

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

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

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

Удачи!

  • 0
    Добавлена правка внизу поста

Ещё вопросы

Сообщество Overcoder
Наверх
Меню