Блог

Главная - Вопросы по программированию - Разделите окно на 4 части, но удаление одного изображения изменяет макет.

Разделите окно на 4 части, но удаление одного изображения изменяет макет.

#html #css

#HTML #css

Вопрос:

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

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

Ответ №1:

Скрипка: http://jsfiddle.net/TFCM4/8 /

Создайте 4 раздела внутри контейнера ( #bgs ) и добавьте описательные имена классов к элементам.

Соответствующий CSS:

 html, body { /* Prevent "borders" from appearing */
    padding: 0;
    margin: 0;
}
#bgs { /* Let the container fill the whole window */
    width: 100%;
    height: 100%;
}
#bgs > div { /* Set the height and width of each div to 50% */
    width: 50%;
    height: 50%;
}
.right {float: right;} /* Align to the right */
.left {float:left;} /* Align to the left */
img {
    display: block;
    height: 100%; /* Let the image stretch/shrink when necessary*/
    width: 100%;
}

HTML:

 <div id="bgs">
    <div class="top left">
        <img src="http://farm7.static.flickr.com/6235/6257586214_7989986f50_z.jpg" />
    </div>
    <div class="top right">
        <img src="http://farm7.static.flickr.com/6235/6257586214_7989986f50_z.jpg" />
    </div>
    <div class="bottom left">
        <img src="http://farm7.static.flickr.com/6235/6257586214_7989986f50_z.jpg" />
    </div>
    <div class="bottom right">
        <img src="http://farm7.static.flickr.com/6235/6257586214_7989986f50_z.jpg" />
    </div>
</div>

Я использовал только left right имена классов и . top И bottom были добавлены, чтобы сделать исходный текст более читаемым.

Предыдущий (табличный) подход:
Добавьте visiblity:hidden; к изображениям, которые должны быть скрыты. Это свойство делает элемент невидимым, но сохраняет место «зарезервированным».

Скрипка: http://jsfiddle.net/TFCM4/2 /

Вместо того, чтобы использовать две таблицы, вы можете объединить таблицы в одну таблицу и добиться желаемого результата без дальнейших проблем. Скрипка: http://jsfiddle.net/TFCM4/3 /

Структура HTML:

 <table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

Комментарии:

1. Спасибо, Роб. Как я могу заставить четыре части покрывать все окно? На данный момент все они сжаты в верхнем левом углу. Каким-то образом таблица занимает как можно меньше места, и я хочу, чтобы изображения были разложены.

2. @Randomblue Просто добавьте height:100%;width:100% в таблицу.

3. Эта скрипка jsfiddle.net/TFCM4/4 автоматически настраивается по горизонтали, но не по вертикали.

4. @Randomblue обновил ответ другим подходом без таблиц . Скрипка: jsfiddle.net/TFCM4/8

5. Приветствия. Проблема сейчас в том, что я не могу выровнять по вертикали и сохранить соотношение сторон! Смотрите jsfiddle.net/TFCM4/9

Ответ №2:

Используйте таблицы и поместите изображение в TD