1 Востаннє редагувалося Matvik (19.03.2013 23:41:36)

Тема: Як поставити декілька "дівів" в кілька рядів?

Є така штука - роблю фотогалерею, і в ній є фотки (мініатюри). Хочу, щоб вони ставали просто по-порядку, в кілька рядів, один за одним. Під кожною фоткою може бути підпис (а може й не бути), висота параграфа підписа різна.

В ХТМЛ це реалізовано так:

<div class="photo" id="photo-<?=$photo->id?>" >
                        
                            <?php 
                            //Виводимо мініатюру фотографії
                            

                            ?>
                        
                            <p class="photo-description">
                                <?=$photo->description?>
                            </p>
                        
                    </div>

Тобто, є дів, в якому є картинка та парафграф.

Питання: які стилі прописати тут, щоб ці діви ставали в кілька рядів один за одним? Зараз є так:

.photo {
    background-color: #E9E8E2;
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
}

.photo-description {
    margin: 0px;
}

Якби у них була однакова висота, то не було б проблеми, але вона різна (за рахунок різних описів, або їх відсутності. Самі міінатюри мають однакову висоту).
Тому зараз другий ряд починається не від лівої границі, а від одного з верхніх дівів, котрий "випирає":
http://img850.imageshack.us/img850/619/sdfggo.png
Дякую

2

Re: Як поставити декілька "дівів" в кілька рядів?

Єдиний варіант, що приходить в голову задати блокам висоту рівну висоті блоку з підписом.

3

Re: Як поставити декілька "дівів" в кілька рядів?

У вас ширина блоків однакова?

4

Re: Як поставити декілька "дівів" в кілька рядів?

Ні, ширина різна. Власне, мініатюри робляться за принципом однакової висоти, відповідно (заради збереження пропорцій фото) ширина різна виходить.

Єдиний варіант, що приходить в голову задати блокам висоту рівну висоті блоку з підписом.

а яку тоді висоту брати? Підпис може бути різного об"єму

5

Re: Як поставити декілька "дівів" в кілька рядів?

ставити ліміт в рядок 4 штуки.
Перебігаєтесь по мініатюрам і показуєте їх, якщо індекс мініатюри кратний 4 тоді просто закриваєте дів і відкриваєте новий. і вуаля в рядок 4 елементи ;)

Подякували: Matvik1

6

Re: Як поставити декілька "дівів" в кілька рядів?

Мм.. ну так, це варіант. Тільки з сайдбаром 3 виходить)

7

Re: Як поставити декілька "дівів" в кілька рядів?

Ріжте підпис до певної кількості символів і решту запихайте в альт.

8 Востаннє редагувалося Matvik (22.03.2013 03:43:49)

Re: Як поставити декілька "дівів" в кілька рядів?

Спробував зробити по лініях дівами, але чомусь не працює:
http://img43.imageshack.us/img43/6933/sdfggy.png
Отака дивна штука, нічого не помінялось, при тому, що навіть спеціально прописав їм display: block.
І в фаєрбагу при наведенні на дів, він не виділяється, ніби його й немає. Що б то могло бути?

.photo-line {
    display: block;
    background-color: #E9E8ff;
    border: 1px black;
}
.photo {
    background-color: #E9E8E2;
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
}

.photo-description {
    margin: 0px;
}

Я в верстці новачок, вибачайте. якщо банальні речі питаюсь)

9

Re: Як поставити декілька "дівів" в кілька рядів?

  .photo-line {
   overflow: hidden;

    display: block;
    background-color: #E9E8ff;
    border: 1px black;
  }

спробуйте

Подякували: Matvik1

10

Re: Як поставити декілька "дівів" в кілька рядів?

О, круто, працює))
Дуже дякую, а можна розтлумачити, чому воно не виглядало нормально раніше, і чому тепер стало добре?