对齐不同高度的花车 [英] Aligning floats of different heights

问题描述

我有困难，控制我的彩车垂直对齐方式。

I'm having difficulties controlling the vertical alignment of my floats.

我目前的情况是这样的：

My current situation looks like this:

我所需的对齐方式是这样的：

My desired alignment would be this:

因此​​的垂直对齐一边＃标题。 当我换部分＃大拇指和在HTML一切都看起来很好抛开＃标题， 但是这不会是语义正确的，特别是因为我必须在整个多个页面重用此code。

Hence the vertical alignment of aside#headlines. When I swap section#thumbs and aside#headlines in the HTML everything looks fine, but that wouldn't be semantically correct, especially because I have to reuse this code throughout multiple pages.

推荐答案

结束语右边浮动到一个单一的右浮动DIV，同时保持左侧浮动分离，解决了这个问题对我来说！

Wrapping the right floats into a single right floating div, whilst keeping the left floats separate, solved the issue for me!

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

The end-result looked somewhat like this:

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

再次感谢！

这篇关于对齐不同高度的花车的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！