CSS / PHP: как решить эту проблему div / float / нечетный четный цикл в массиве - PullRequest
Новая
       15

CSS / PHP: как решить эту проблему div / float / нечетный четный цикл в массиве

1 голос
/ 09 сентября 2009

Мой код в конце этого поста.

Как же я могу получить "коробку 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>

Ответы [ 7 ]

2 голосов
/ 09 сентября 2009

Не знаю, как получить это с помощью чистого CSS, используя один класс для всех внутренних DIV. Вы хотите что-то вроде масонства .

Думайте о масонстве как об обратной стороне CSS-плавающих элементов. Там, где поплавки располагают элементы горизонтально, а затем вертикально, масонство размещает их вертикально, а затем горизонтально. Результат не оставляет вертикальных промежутков между элементами разной высоты, точно так же, как каменщик укладывает камни в стене.

- Домашняя страница масонства

0 голосов
/ 09 сентября 2009

* ПОСЛЕ ТОГО, ЧТОБЫ ВЫПУСК CSS, КОД PHP *

вот мой код: http://www.pcgage.net/code.zip (извините, при вставке кода он действительно испортился даже при использовании контейнера кода).

Прокрутите до строки: 160 (до 174) - это рассматриваемый цикл. Если бы я мог просто иметь нечетное / четное число, это работало бы отлично. Сейчас, кто когда-либо делает это, просто используйте текущий код в div для новой нечетной части, я могу отредактировать это, чтобы позже использовать другой стиль.

Спасибо за помощь, пока это было фантастически.

0 голосов
/ 09 сентября 2009

Еще один. Возможно, вы можете пометить нечетные и четные поля: 

<!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>
0 голосов
/ 09 сентября 2009 
 <!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>

попробуйте это

0 голосов
/ 09 сентября 2009

Я собираюсь предположить, что эти div создаются динамически.

Ваша текущая проблема в том, что вы не можете получить плавающие предметы ниже, чем самый высокий из div в этом ряду. Я не могу придумать способ сделать то, что вы хотите, используя CSS. Тем не менее, если вы создаете эти div, перебирая массив, это решаемо.

Я бы, вероятно, создал два соседних элемента div и в цикле проверил, является ли число циклов четным. Если это, добавьте динамический div в правый столбец вместо левого. Это будет выглядеть странно, если высота div в конечном итоге будет больше с одной стороны, но это можно исправить путем отслеживания высоты div и присвоения нового div более короткому столбцу вместо чередования четных и нечетных.

0 голосов
/ 09 сентября 2009 
<!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>
0 голосов
/ 09 сентября 2009

Я думаю, что это невозможно сделать только одним стилем. Я бы, вероятно, применил float: left к каждому нечетному блоку, а float: right к каждому четному блоку. Таким образом, вы можете зацикливать свой массив и применять соответствующий класс, не применяя особую обработку к любому конкретному блоку.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...