问对齐不同高度的浮动

EN

将右边的浮动包到一个单独的右边浮动div中，同时保持左边的浮动分开，为我解决了这个问题！

最终结果看起来有点像这样：

<aside id="quote" class="float_left">
  blabla
</aside>

<div class="float_right">

  <article id="intro">
    blabla
  </article>

  <section id="thumbs">
    blabla
  </section>

</div>

<aside id="headlines">
  blabla
</aside>

再次感谢！

你不能用CSS做到这一点。破坏浮点数是一个常见的问题，最好的方法是完全丢弃浮点数，并在display: block中使用div。但是，如果你真的想使用floats，那就看看jQuery Masonry Plugin吧。

我很抱歉没有更好的答案！

我知道这有点难，但是看看我是如何处理this...and的，是的，这是可以做到的。

如果我没理解错的话，那就照我说的做，首先创建一个包装所有内容的主包装器。

然后，如果您愿意，将上面的每个框包装在各自的列包装器中，然后浮动这些框，而不是浮动单独的项。举个例子

(伪代码来了)

<div id="MAINwrapper>//THIS wraps all your content
<div id="mainLEFTwrapper">//float this left
   <div one></div>
   <div two></div>
</div>
and THIS wraps your divs that float to the right
<div id="mainMID/RIGHT wrapper>//float this left or right
   <div 3></div>
   <div 4></div>
</div>
</div><!-- main wrap ender -->

那么css就很简单了。第一组向左浮动(上面的markef为左包装)，第二套为右浮动。(标记为右包装)

现在，由于您的内部列内容/元素现在被包装在它们各自的左/右列包装器中，所以它们彼此分开，您可以用边距或简单的<br/>标记来分隔它们的高度。

最后，确保给主包装一个最小宽度，它是两个内部列包装宽度的总和，这样当屏幕/文档窗口小于主包装宽度(因此是浮动宽度)时，它们就不会“浮动”在彼此下面。

就是这样。我试着像这样对待这种情况，就像老派的桌子笑。如果你想一下我上面解释的东西，比如刚性表格，你会更好地理解它。

祝好运。

如果你需要更多的帮助，请呼喊，但我100%肯定会成功的。