html - 異なる高さのフロートを整列させる

Question

フロートの垂直方向の配置を制御するのに問題があります。

私の現在の状況は次のようになります。

私の希望する配置はこれです：

したがって、の垂直方向の配置aside#headlines。スワップsection#thumbsしaside#headlinesてHTMLですべてが正常に見えるが、特にこのコードを複数のページで再利用する必要があるため、意味的には正しくありません。

Answer 1

CSSではそれを行うことはできません。フロートを破壊することは一般的な問題です。それを行う最良の方法は、フロートを完全に廃棄し、でdivを使用することdisplay: blockです。ただし、本当にfloatを使用したい場合は、jQueryMasonryPluginを確認してください。

すみません、きちんとした答えがありません！

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は単純です。FLOATは最初のセット（上記の左のラッパーとしてマーク）に左に移動し、2番目のセット（右のラッパーとしてマーク）に右にフロートします。

これで、内側の列のコンテンツ/要素がそれぞれの左/右の列ラッパー内にラップされるため、それらは互いに重なり合い、余白または単純な<br/>タグのいずれかで高さを区切ることができます。

最後に、メインラッパーを指定してください。これは、画面/ドキュメントウィンドウがメインラッパーの幅よりも小さい場合に、2つの内側の列ラッパーの幅を合計して互いに「浮かない」ようにする最小幅です（したがって、浮かぶ）笑。

以上です。私はこのような状況を、昔ながらのテーブルのように扱ってみます笑。私が上で説明したリジッドテーブルのようなものについて考えると、それをよりよく理解できます。

幸運を。

さらに助けが必要な場合は、ホラー、しかしこれは100％確実に機能します。

Answer 3

左側のフロートを分離したまま、右側のフロートを1つの右側のフローティング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>

[編集]質問を誤解しました