Question

我的代码就在这篇文章的末尾。

我如何得到“方框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>

Answer 1

不知道如何使用单个类为所有内部DIV使用纯CSS来实现此目的。你需要像Masonry这样的东西。

将Masonry视为CSS浮动的另一面。浮子在水平和垂直方向上排列元素的位置，砌体垂直排列然后水平排列。结果在不同高度的元素之间没有垂直间隙，就像在墙上安装石头的石匠一样。

- 砌体主页

Answer 2

我认为只用一种风格就不可能做到这一点。我可能应用浮动：左边每个奇数框和浮动：右边每个偶数框。这样你就可以遍历你的数组并应用一个合适的类，而不是对任何特定的盒子进行特殊处理。

Answer 3

<!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>

Answer 4

我将假设这些div正在动态创建。

您当前的问题是，您无法获得低于该行中div的最高级别的浮动项目。我不能想到用css做你想要的方法。但是，如果您通过循环遍历数组来创建这些div，则可以解决此问题。

我可能会创建两个并排的div并在循环中检查循环计数是否为偶数。如果它将动态div附加到右列而不是左侧。这看起来很奇怪，如果div的高度最终在一侧变大，但这可能通过跟踪div高度并将新div分配给较短的列而不是通过交替偶数和奇数来修复。 / p>

Answer 5

 <!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>

尝试这个

Answer 6

另一个。也许，您可以标记奇数和偶数框：

<!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>

Answer 7

*关注CSS问题，PHP代码*

这是我的代码：http://www.pcgage.net/code.zip（抱歉，粘贴代码导致它真的搞砸了，即使使用代码容器）。

滚动到第160行（至174） - 这是有问题的循环。如果我可以简单地使用奇数/偶数，那将完美无缺。现在，谁做过这个，只需使用div中的当前代码为新的奇数部分，我可以编辑它以便以后使用不同的样式。

感谢您的帮助，到目前为止一直很棒。

css / php：如何在数组中解决这个div浮点问题/奇数偶数循环

7 个答案: