CSS Block浮动

Question

我有这个html文件

    <div class="con" style="width:100px;height:200px;">
        1
    </div>
    <div class="con" style="width:100px;height:200px;">
        2
    </div>
    <div class="con" style="width:100px;height:400px;">
        3
    </div>
    <div class="con" style="width:100px;height:400px;">
        4
    </div>
    <div class="con" style="width:100px;height:100px;">
        5
    </div>
    <div class="con" style="width:100px;height:100px;">
        6
    </div>
    <div class="con" style="width:100px;height:100px;">
        7
    </div>
    <div class="con" style="width:100px;height:100px;">
        8
    </div>

我希望这个html有这个结果：

但我写这个css：

<style>
body {
width:440px;
height:440px;
}
.con{
float:left;
background:#bebebe;
margin:1px;
}
</style>

我得到了这个结果！ :-(

我再说一遍，我只使用我编写的html代码获得第一张图片的结果。

Answer 1

首先，您不应该有多个具有相同id的项目。这是class的用途。 id在页面中应该是唯一的。

解决方案是你的问题是将两个高大的块浮动到right以及其他所有left。

这当然只有当盒子放在一个容器（即主体）中时才有效，这个容器对于所有四个容器都是正确的宽度，否则你最终会在布局的中间留下一个间隙。

麻烦的是，因为你拥有相同的ID，所以你不能轻易指定哪些要向右浮动，哪些要向左浮动。

有办法实现，但正确的解决方案是使用类。

<div class="con" style="width:100px;height:200px;">
    1
</div>
<div class="con" style="width:100px;height:200px;">
    2
</div>
<div class="con tall" style="width:100px;height:400px;">
    3
</div>
<div class="con tall" style="width:100px;height:400px;">
    4
</div>
<div class="con" style="width:100px;height:100px;">
    5
</div>
<div class="con" style="width:100px;height:100px;">
    6
</div>
<div class="con" style="width:100px;height:100px;">
    7
</div>
<div class="con" style="width:100px;height:100px;">
    8
</div>


<style>
body {
  width:408px;
  height:440px;
}
.con {
  float:left;
  background:#bebebe;
  margin:1px;
}
.tall {
  float:right;
}

</style>

如果您无法（或不会）更改HTML代码，我还可以建议另外一个解决方案 - CSS [attr]选择器将允许您指定其他CSS具有特定属性的元素的样式。在这种情况下，您可以使用它来挑选高大的块并将它们向右浮动。

#con[style~='height:400px;'] {float:right;}

这只会影响id="con"元素和style属性包含height:400px;的元素。

但请注意，[attr]选择器不适用于旧版本的IE，因此如果您决定使用它，可能需要谨慎。

此解决方案还涉及将某些元素浮动到右侧，您似乎已将其设置为死区，但它仍然是唯一可行的纯CSS解决方案。

Answer 2

将width的{​​{1}}更改为body，然后将408px;更改为div 3＆amp; 4。

演示： http://jsbin.com/imire5

更新了只有 的 的演示

Answer 3

您遇到的基本问题是CSS float的工作方式与您希望的工作方式不同。

您的问题的另一个答案可能是使用Javascript来破解它。

有一个名为Masonry的jQuery插件，它看起来就像你所追求的那样。您可以将float:left;用于所有内容，然后使用Masonry填补空白。

这意味着依赖于一个不完全基于CSS的解决方案，这可能并不理想 - 特别是因为我已经为您提供了一个可用的CSS解决方案。

（同样，一旦你开始使用Javascript，你肯定需要解决你的id vs class问题 - 如果你拥有所有这些元素，Javascript将告诉你相同的id）