对齐不同高度的花车花车、高度、不同

2023-09-12 21:26:55 作者:Find yourself 找自己

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

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>

再次感谢!