Позиция позиции CSS

Question

Я пытаюсь поместить некоторый текст относительно предыдущего элемента. Таким образом, у меня есть 4 ящика и 1 контейнер, первый и второй элементы работают, но тогда проблема начинается. Предполагается, что на каждой строке должно быть 2 строки с 2 ящиками.

Box1 | Box2 Box3 | Box4

Но Box3 не показывает, как предполагается.

http://homeweb.mah.se/~M09K0291/test.htm

В Chrome я получаю текст из Box 3 ниже фактической коробки и в IE третий ящик за четвертую коробку.

Любые идеи?

Answer 1

div.c { 
clear:left; 
position:relative; 
top:-100px; 
} 

div.d { top:-200px; } 

Answer 2

Поскольку вы определяете явную ширину и высоту для коробок в любом случае, это, вероятно, более ясным и прочным, чтобы просто использовать абсолютное позиционирование с position: relative набор на .page1.

Например:

.page1 { position: relative; } 
.a, .b, .c, .d { position: absolute; } 
.a { top: 0; left: 0; } 
.b { top: 0; left: 100px; } 
.c { top: 100px; left: 0; } 
.d { top: 100px; left: 100px;} 

См: http://jquery.nodnod.net/cases/597

EDIT:

Если вы не хотите использовать абсолютное позиционирование, или вы хотите, чтобы избежать top и left, вы можете также использовать плавает и очищается:

.a, .b, .c, .d { float: left; } 
.a, .c { clear: left; } 

Yo Вам также потребуется применить очистку поплавка для .page1 через что-то вроде clearfix.

См: http://jquery.nodnod.net/cases/598

Answer 3

Положение относительное положение элемента относительно того, где он обычно будет. Элемент не выводится из потока документа, поэтому, если вы его перемещаете, это повлияет на позиционирование элементов после него.

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

Пример использования относительной positoning

Если вы используете положение относительно элементы перемещаются с сверху и слева.

div.fyrkant 
{ 
    height: 100px; 
    width: 100px; 
    position:relative; 
} 
div.a 
{ 
    background-color: #b5e274; 
} 
div.b 
{ 
    background-color: #e2d974; 
    left: 100px; 
    top:-100px; 
} 
div.c 
{ 
    background-color: #e2b074; 
    top: -100px; 
} 
div.d 
{ 
    background-color: #e27e74; 
    top: -200px; 
    left: 100px; 
} 

Если вы не хотите использовать верхнюю и левую стороны, вам следует исследовать использование поплавков и очистить эту проблему.

Пример использования поплавков

Лучшее решение кросс-браузер будет включать добавление разметку для HTML. Так как вы хотите, это два ряда блоков, окружающих каждую строку с помощью div.

<div class="page1"> 
    <div class="row"> 
     <div class="a fyrkant">test a 
     </div> 
     <div class="b fyrkant">test b 
     </div> 
    </div> 
    <div class="row"> 
     <div class="c fyrkant">test c 
     </div> 
     <div class="d fyrkant">test d 
     </div> 
    </div> 
</div> 

Затем добавить в свой CSS

div.fyrkant 
{ 
    height: 100px; 
    width: 100px; 
} 
.row {overflow:hidden;zoom:1;} 
.a, .b, .c, .d { float: left; } 

переливной: скрытый очищает поплавки так .row содержит блоки. Если у вас нет того, что строки не имеют высоты, а строки будут в одной строке. Переполнение: скрытое не работает в ie6, но масштабирование: 1 будет (вызывает haslayout)