Question

我在控制浮子的垂直对齐方面遇到了困难。

我目前的情况如下： current http://s17.postimage.org/smcbel0pr/current_alignment.jpg

我希望的对齐方式是： desired http://s13.postimage.org/f1bw4l213/desired_alignment.jpg

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

Answer 1

你不能用CSS做到这一点。打破浮动是一个常见的问题，最好的方法是完全删除浮动并使用display: block的div。但是，如果您真的想使用花车，请查看jQuery Masonry Plugin。

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

Answer 2

我知道它有点了，但看看我是如何处理的......是的，可以做到。

好吧，如果我理解正确，那么做我做的，FIRST创建一个包装所有内容的主包装器，包装所有内容。

然后，如果你愿意的话，不要浮动单独的项目，如果你的盒子在你自己的列包装器上面，请将它们包起来，然后浮动它们。所以例如

（伪代码来了）

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

现在，由于您的内部列内容/元素现在已经包含在各自的左/右列包装中，因此它们会相互分开，您可以使用边距或简单的<br/>标记分隔它们的高度。

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

就是这样。我试着对待像这样的情况，比如oldschool表lol。如果你考虑我上面解释的内容如刚性表，那么你会更好地理解它。

祝你好运。

如果你需要进一步的帮助，请大声说，但是这个我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

你必须将它们包装在列的div中，然后浮动列。

<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>

[编辑] 误解了问题

对齐不同高度的浮标

4 个答案: