0

これが私のjsFiddleです

私のフィドルリンクでは、左側のサイドバーと右側のサイドバーを浮かせました。私の知る限り、浮動要素はhtmlの通常のフローから削除されます。なぜそれが私の右サイドバーを置き換えているのか理解できませんでした。

<div class="content-area">
<div class="left-sidebar"></div>
<div class="main-area">hi</div>
<div class="right-sidebar"></div>

私のCSS：

.content-area {
   background-color: #bbb;
   height: 310px;
}
.left-sidebar {
   float: left;
   width: 50px;
   height: 100%;
   background-color: #abcdef;
}
.right-sidebar {
   float: right;
   width: 50px;
   height: 100%;
   background-color: #abcdef;
}
4

3 に答える 3

2

http://www.vanseodesign.com/css/understanding-css-floats/

要素は、通常のフローに従って順番に配置され、通常のフローから削除され、フロートに基づいて左右に移動されます。右側のサイド バーは、通常の流れではメイン コンテンツの後に来るため、下にシフトされています。シフトしたくない場合は、要素の順序を変更する必要があります。

http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme

仕様ごと：

フロート モデルでは、まず通常の流れに従ってボックスを配置し、次に流れから外して、可能な限り左または右にシフトします。フロートの側面に沿ってコンテンツが流れる場合があります。

于 2013-08-09T15:55:05.093 に答える
1

と混同していposition: absoluteます。フローティングは、要素を左また​​は右に移動し、他の要素がその周りに「浮かぶ」ようにしますが、それらはまだフロー内にあり、他の要素はそれによって影響を受けます.

を使用する場合position: absolute、要素をフローから削除して、他の要素の上または下に配置します。

これが更新された fiddleです。最も重要な変更点は次の部分です。

.content-area {
    background-color: #bbb;
    height: 310px;
    position: relative;
}
.left-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    background-color: #abcdef;
}
.right-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    background-color: #abcdef;
}

親にも位置が与えられているため、サイドバーはその中の位置にすることができます。左サイドバーと右サイドバーは、それぞれ親の上部と左端と右端に配置されます。

よく見ると、メイン コンテンツ ブロックのコンテンツがサイド バーの後ろにあることがわかります。左のバーの下から見えるように、テキストを少し長くしました。

もちろん、これはおそらくあなたが望むものではありませんが、マークアップの順序を変更することで非常に簡単に解決できます。最初に好きな順序でサイドバーを追加してから、メイン コンテンツを追加します。結果はこちらでご覧いただけます。

これが機能する方法: コンテンツ領域の上部で、左側のサイド バーが最初に開始されます。左にフロートし、次の要素がその隣にフロートするように促し、同じ上の位置に配置します。その要素は、右にフロートする右側のサイド バーになり、次の要素がその左にフロートするように促します。メイン領域には明示的な幅がないため、同じ上部位置から開始して、その間にぴったりと収まるように計算されます。

メイン要素自体はフロートしないため、次の要素はメイン領域が終了する場所 (上) から開始されます。したがって、右のバーがメイン エリアの後に来る場合は、例のように下に移動します。メイン エリアのコンテンツが大きくなると、右のバーはさらに下に移動します。

于 2013-08-09T15:55:15.877 に答える
0 
<div class="content-area">
<div class="left-sidebar"></div>
<div class="right-sidebar"></div>
<div class="main-area">hi</div>

他の 2 つの浮動要素の後に来るように main-area を変更する必要があります。このようにするのは奇妙に思えるかもしれませんが、コンテンツがマークアップでメインエリアの後に来るため、メインエリアが右サイドバーを押し下げないことを意味します。これが役立つことを願っています。

于 2013-08-09T15:59:49.980 に答える