html - 对齐不同高度的浮动

Question

我很难控制我的花车的垂直对齐方式。

我现在的情况是这样的：

我想要的对齐方式是这样的：

因此 的垂直对齐aside#headlines。当我交换HTML 时section#thumbs，aside#headlines一切看起来都很好，但这在语义上是不正确的，尤其是因为我必须在多个页面中重用这段代码。

Answer 1

你不能用 CSS 做到这一点。打破浮动是一个常见问题，最好的方法是完全废弃浮动并使用 div 和display: block. 但是，如果您真的想使用浮点数，请查看jQuery Masonry 插件。

对不起，没有更简洁的答案！

Answer 2

我知道这有点困难，但看看我是如何处理这个的……是的，它可以做到。

好吧，如果我对您的理解正确，那么做我该做的，首先创建一个包含所有内容的主包装器，该包装器包含您的所有内容。

然后，不要浮动单独的项目，如果你愿意的话，如果你的盒子在他们自己的列包装器中包装每个，然后浮动它们。所以例如

（伪代码来了）

<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很简单。第一组向左浮动（上面的标记为 LEFT 包装器），第二组向右浮动。（标记为 RIGHT 包装器）

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

然后完成，确保你给主包装，一个最小宽度，总计你的两个内列包装宽度，这样当屏幕/文档窗口小于主包装宽度时，它们不会“浮动”在彼此下方（因此浮动）大声笑。

就是这样。我试着处理这样的情况，比如老式桌子哈哈。如果你想想我上面解释的像僵硬的桌子，那么你会更好地理解它。

祝你好运。

如果您需要进一步的帮助，请大声说，但我 100% 肯定会工作。

Answer 3

将右浮动包装成一个右浮动 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>

再次感谢！

Answer 4

You'd have to wrap them in divs for the columns, then float the columns.

<div style="float:left">
   <div id="quote">blah</div>
   <div id="headlines">blah</div>
</div>
<div style="float:right">
   <div id="intro">blah</div>
   <div id="thumbs">blah</div>
</div>

[edited] misunderstood the questions