Мой код находится в конце этого сообщения.
Как, на самом деле, я получаю «поле 3», чтобы присваивать значение рядом с «ящиком 1» или содержимому внутри «ящика 1» вместо выравнивания в конце «окна 2».
Важно то, что все четыре блока ДОЛЖНЫ использовать один и тот же стиль – (стиль 2), поскольку он используется в вызываемом массивом.
Вот что это сейчас и что я пытаюсь сделать:
http://img524.imageshack.us/img524/1408/lastexample.gif
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- .style1 {border:1px solid #000000; width:620px; position:relative; } .style2 {border:1px solid #000000; width:300px; float:left;} --> </style> </head> <body> <div class="style1"> <div class="style2">box 1<br> <br> <br> </div> <div class="style2">box 2<br> <br> <br> <br> </div> <div class="style2">box 3<br> <br> </div> <div class="style2">box 4<br> <br> <br> </div> </div> </body> </html> Не знаю, как получить это с помощью чистого CSS, используя один класс для всех внутренних DIV. Вы хотите что-то вроде масонства .
Подумайте о масонстве, как о флип-стороне пловцов CSS. Когда поплавки располагают элементы горизонтально, а затем вертикально, масонство устраивает их вертикально, а затем горизонтально. Результат не оставляет вертикальных зазоров между элементами разной высоты, точно так же, как каменщик, прилегающий к стене.
– Домашняя страница масонства
Я думаю, что это невозможно сделать только с одним стилем. Я бы, вероятно, применил float: оставил для каждого нечетного поля и float: право на каждую четную коробку. Таким образом, вы можете перебрать свой массив и применить соответствующий класс и не давать специального лечения какой-либо конкретной коробке.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- .style1 {border:1px solid #000000; width:620px; position:relative;} .style2 {border:1px solid #000000; width:300px; float:left;} .col1 { width:300px; float:left; } .col2 { margin-left:300px; } --> </style> </head> <body> <div class="style1"> <div class="col1"> <div class="style2">box 1<br> <br> <br> </div> <div class="style2">box 3<br> <br> </div> </div> <div class="col2"> <div class="style2">box 2<br> <br> <br> <br> </div> <div class="style2">box 4<br> <br> <br> </div> </div> </div> </body> </html>
Я собираюсь предположить, что эти divs динамически создаются.
Ваша текущая проблема заключается в том, что вы не можете получить плавающие элементы ниже, чем самые высокие из div в этой строке. Я не могу думать о том, как сделать то, что вы хотите использовать css. Однако, если вы создаете эти divs, перейдя по массиву, это можно решить.
Я бы, вероятно, создал две бок о бок divs и в цикле проверить, если количество циклов четное. Если добавить динамический div в правый столбец вместо левого. Это будет выглядеть странно, если высота divs будет больше с одной стороны, но это может быть исправлено путем отслеживания высот div и назначения нового div для более короткого столбца вместо чередования четного и нечетного.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- .style1 {border:1px solid #000000; width:620px; position:relative; } .style2 {border:1px solid #000000; width:49%; float:left;} .style3 {border:1px solid #f00; width:49%;margin-top:-20px;float:left;} --> </style> </head> <body> <div class="style1"> <div class="style2">box 1<br> <br> <br> </div> <div class="style2">box 2<br> <br> <br> <br> </div> <div class="style3">box 3<br> <br> </div> <div class="style2">box 4<br> <br> <br> </div> <div style="clear:both"></div> </div> </body> </html>
Попробуй это
Еще один. Возможно, вы можете отметить нечетные и четные поля:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- .style1 {border:1px solid #000000; width:620px; position:relative;} .style2 {border:1px solid #000000; width:300px; } .a {float:left;} .b {float:right;} --> </style> </head> <body> <div class="style1"> <div class="style2 a">box 1<br> <br> <br> </div> <div class="style2 b">box 2<br> <br> <br> <br> </div> <div class="style2 a">box 3<br> <br> </div> <div class="style2 b">box 4<br> <br> <br> </div> </div> </body> </html>
* ПОСЛЕДУЮЩАЯ ДЕЯТЕЛЬНОСТЬ К CSS-ВЫПУСКУ, PHP-КОД *
вот мой код: http://www.pcgage.net/code.zip (извините, вставка кода заставила его действительно испортиться, даже используя контейнер кода).
Прокрутите до строки: 160 (до 174) – это рассматриваемая петля. Если я могу просто иметь нечетное / четное, это будет работать отлично. На данный момент, кто когда-либо делает это, просто используйте текущий код в div для новой нечетной части, я могу отредактировать это, чтобы позже использовать другой стиль.
Спасибо за помощь, пока это фантастика.