Question

我有一个容器div，它包含不同数量的div，所有div都具有相同的类。各种div的内容是动态的，将驱动div块的高度。宽度设置为固定值，适用于2个柱。我遇到了第一个div向左浮动的情况，然后下面的两个div分别比第一个div短，但是当它们组合时，它们会延伸到第一个div到它们的左边。接下来的第四个div然后浮回到第一个div下面的第一列，但是它不是“向上”浮动直接位于第一个div下面。它将显示为向左浮动，垂直位置位于第三个div块下方。有办法解决这个问题吗？

请记住，我通过循环生成容器div中的每个div，因此希望为每个div创建一致的样式类。如果使用一个样式类是不可能这样做的，有没有办法在用PHP脚本填充之后获得div的高度？

以下是我遇到的问题的一个示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dynamic Div Test</title>
<style>
.container2 {
    width: 1000px;
    display: block;
    position: relative;
    float: none;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    background: #000;
    overflow: hidden;
    -moz-box-shadow: 0px 0px 20px #FFF;
    -webkit-box-shadow: 0px 0px 20px #FFF;
    box-shadow: 0px 0px 20px #FFF;
    min-height: 100%;
}
.container {
    width: 660px;
    display: block;
    position: relative;
    float: left;
    margin-left: 5px;
    margin-top: 10px;
    margin-bottom: 35px;
    background-color:#093;
    height:400px;
}
.dynamicDiv {
    float: left;
    position:relative;
    display:block;
    background-color: #FFF;
    width: 325px;
    padding: 0px;
    margin-top: 0px;
    margin-right: 5px;
    margin-bottom: 5px;
    margin-left: 0px;
}
</style>
</head>

<body>
<div class="container2">
    <div class="container">
        <div id="div1" class="dynamicDiv">1<br />2<br />3<br /></div>
        <div id="div2" class="dynamicDiv">1<br />2<br /></div>
        <div id="div3" class="dynamicDiv">1<br />2<br /></div>
        <div id="div4" class="dynamicDiv">1<br />2<br />3<br /></div>
    </div>
</div>
</body>
</html>

Answer 1

听起来你想要的是'砖石'风格的布局，请查看isotope。

Answer 2

编辑 - 哎呀，我可能误会了！下面的代码将简单地给你浮动div，但包装器将不允许高/短“浮动”。有插件可用于开箱即用的解决方案。

建议：

jQuery Masonry

或Josh Rutherford注意到，同位素。

对于每两个div，也生成一个包装div。

<div class="container2">
    <div class="container">
        <div class="wrapper" id="div_wrapper_1">
            <div id="div1" class="dynamicDiv"></div
            <div id="div2" class="dynamicDiv"></div>
       </div>
       ...
   </div>

<style type="text/css">
  .dynamicDiv {
    float: left;
   }
   .wrapper {
     overflow: hidden;
   }
</style>

如何浮动填充块div上方的垂直空间？

2 个答案: