web-dev-qa-db-ja.com

2つの列をcssと並べて適切にフロートさせる方法

これは私がずっと前に学んだことの1つであり、実際にそれを行っているかどうかについてはあまり考えていませんでした右方法。

次のような構造があるとしましょう。

<div id="wrapper">
  <div id="sideBar"></div>
  <div id="mainContent"></div>
</div>

また、wrapperの幅が600pxであるとしましょう。

sideBarleftとmainContentrightをフロートする必要がありますか、それとも両方をleftフロートする必要がありますか？

さらに、sideBarに固定幅を設定した場合、テーブルの動作と同様に、mainContentで残りのスペースを埋めるにはどうすればよいですか？ mainContentをdisplay:inline-blockとwidth:100%に設定すると、次の行に移動します：/

注：私の特定のシナリオでは、テーブルを使用したくありません。

jqueryhtmlcsswidthcss-float
13
The Muffin Man

君は display:block に加えて float:leftdivを並べてフロートします。

http://jsfiddle.net/FhL4u/2/ で作業例を確認してください

最初のdiv幅のみがわかっている場合にmainContentが残りのスペースを埋めるようにするには、sideBarとmainContentの両方でパーセンテージを使用します。例：固定幅を使用する代わりに20％80％。それ以外の場合は、ブラウザー間の互換性を実現するためにJavaScriptソリューションが必要になります。

http://jsfiddle.net/FhL4u/3/ でjQueryソリューションを確認してください

15
Hussein

ここから答えを変更しています： インラインブロック要素を行の残りの部分に埋める方法は？

  • #sideBarのみがフロートされます。
  • 後でこの手法を微調整して同じ高さの列にすることはできないので、答える前に尋ねました。 （まあ、できますが、 偽の列 にはbackground-imageを使用する必要があります）

参照： http://jsfiddle.net/qx32C/37/

#wrapper {
    overflow: hidden; /* clear the float */
}
#sideBar {
    width: 100px;
    float: left;
    background: #f0f
}
#mainContent {
    overflow: hidden;
    background: #ccc
}

margin-left: 100pxでoverflow: hiddenを#mainContentに置き換えたのはなぜですか？

6
thirtydot

フロートを左または右に使用することは重要ではありません。 600pxの幅のラッパーがあります。サイドバーとインクルードの両方にfloatを使用し、ラッパー内に含める場合は、サイドバーの幅とインクルード（マージンとパディングを含む）が600px以下であることを確認する必要があります。そうでない場合、2番目の要素は最初の要素の下になります。これがお役に立てば幸いです^^

1
Kent

使用する display:flex2つのdivフロートを並べて使用する場合

#wrapper {
    width: 600px;
    display: flex;
}
#sideBar {
    display: inline-flex;
    width: 25%;
}
#mainContent {
    width: 75%;
    flex: 1;
}
0
Mike Tavish