我的代码在这篇文章的末尾。
我究竟如何让“框 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>
最佳答案
不知道有什么方法可以通过对所有内部 DIV 使用单个类来使用纯 CSS 来实现这一点。你想要像 Masonry 这样的东西.
Think of Masonry as the flip side of CSS floats. Where as floats arrange elements horizontally then vertically, Masonry arranges them vertically then horizontally. The result leaves no vertical gaps between elements of varying height, just like a mason fitting stones in a wall.
-The Masonry home page
关于php - CSS/PHP : how to solve this div float problem/odd even loop in array，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1401269/