CSS - Как правильно всплыть в псевдоколонках - PullRequest
Новая
       5

CSS - Как правильно всплыть в псевдоколонках

1 голос
/ 19 июля 2011

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

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>

Каков правильный CSS, чтобы правильно расположить их так, как показано на рисунке ниже? Решение должно работать правильно, так как размер браузера изменен, и желательно работать на> = IE7.

Div element positioning

Думайте об этом как о панели действий (# 1) и 3 информационных экранах (# 2, # 3, # 4), поэтому ожидается, что 2,3,4 расширится по ширине, чтобы заполнить окно браузера и поток под панелью действий при уменьшении размера браузера.

Ответы [ 5 ]

2 голосов
/ 19 июля 2011

Используйте это 

#id1, #id2, #id3, #id4{ float:left; }
#id1{ width:50%; height:300px; background-color:red; }
#id2{ width:50%; height:50px; background-color:blue; }
#id3{ width:25%; height:250px; background-color:green; }
#id4{ width:25%; height:250px; background-color:yellow; }

демо на http://jsfiddle.net/gaby/wsEt6/

Я изменил ваши id с, поскольку они не могут быть числовыми.
http://www.w3.org/TR/html4/types.html#h-6.2

2 голосов
/ 19 июля 2011

РЕДАКТИРОВАТЬ: я только что прочитал нижнюю часть, так что мой пример является фиксированным (ширина) ...

id не может быть числом, но для сохранения вашего примера я буду использоватьчисла прописаны.

CSS: 

.container { overflow:hidden; /* Clear Floats */ width:400px; }
#one, #two, #three, #four { float:left; }
#one { width:200px; }
#two { width:200px; }
#three { width:100px; }
#four { width:100px; }

Пример: http://jsfiddle.net/DOSBeats/CqSTY/

1 голос
/ 19 июля 2011

Я бы предложил использовать контейнерные дивы для них.Как то так: 

<div id="one" class="left"></div>
<div class="right">
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
</div>
0 голосов
/ 19 июля 2011

проверьте, помогает ли вам это, просто не забывайте изменять div, как вам нужно, в игре div с ними в соответствии с размером экрана, который вам нужен:

http://jsfiddle.net/z747R/

0 голосов
/ 19 июля 2011

Обертка #1, #2, #3, #4 в контейнере div, #0.5. Переместите #1 div влево и получите ширину 50%. Оберните #1, #2, #3 в контейнерный элемент с именем #container - поместите его прямо с шириной 50%.

Сделайте то же самое для div внутри #container

...