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

【问题标题】：css/php: how to solve this div float problem / odd even loop in arraycss/php：如何解决这个 div 浮点问题/数组中的奇偶循环
【发布时间】：2010-11-26 22:34:40
【问题描述】：

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

究竟如何让“box 3”与“box 1”或“box 1”内的内容对齐，而不是在“box 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>

【问题讨论】：

吉姆，把你的 PHP 给我们，有人会想出一个解决方案。
phh 现在已添加到此页面上的答案中并附有说明

标签： php html css

【解决方案1】：

不知道有一种方法可以使用纯 CSS 对所有内部 DIV 使用单个类来实现这一点。你想要像Masonry 这样的东西。

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

-Masonry 主页

【讨论】：

我喜欢这个外观，但我宁愿找到一个更简单的解决方案，不过谢谢，很有趣。

【解决方案2】：

我认为只用一种风格是不可能做到的。我可能会将 float: left 应用于每个奇数框， float: right 应用于每个偶数框。这样你就可以遍历你的数组并应用一个适当的类，而不是对任何特定的盒子进行特殊处理。

【讨论】：

这确实似乎是实现我需要的正确 css 解决方案。现在我需要弄清楚如何在数组中获得允许以及偶数和奇数样式，我实际上不知道该怎么做:(
php，不过，我不是编码员，所以对我来说，做这样的事情很棘手。

【解决方案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>

【讨论】：

哇，我想你已经破解了。我会在我的网站上试试这个并报告。
说得太早了，它是一个数组，代码说
每次都会为每个盒子调用（使用动态内容），所以我不能有新的divs 在调用 this 之间。

【解决方案4】：

我将假设这些 div 是动态创建的。

您当前的问题是您不能让浮动项目低于该行中最高的 div。我想不出一种使用css做你想做的事的方法。但是，如果您通过遍历数组来创建这些 div，则可以解决。

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

【讨论】：

我很想在循环中添加一个偶数/奇数部分，但目前我不知道该怎么做。我给你看这个循环的 php 代码怎么样，有人可以尝试给我一个偶数/奇数部分的选项吗？

【解决方案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>

试试这个

【讨论】：

它是一个数组，因此我无法在循环内随意修改，或者我可以在循环中创建样式 3，目前它都是动态的。
你的循环中如何迭代？只有这四个？或一组 4 个 div
一个 div 被重复满足条件，然后重复。

【解决方案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>

【讨论】：

这仅在 php 脚本允许奇数/偶数循环时才有效。我希望有人能帮我解决这个问题，因为我现在已经发布了脚本以及循环在这个页面上的位置。

【解决方案7】：

*关注 CSS 问题，PHP 代码 *

这是我的代码：http://www.pcgage.net/code.zip（抱歉，即使使用代码容器，粘贴代码也会导致它非常混乱）。

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

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

【讨论】：