2

ここで私がする必要があることに対処する答えを見つけましたが、それは私にとって完全に機能していないようです. サイドバーの div を左右にフロートさせています。真ん中にdivを貼り付けてスペースを埋めたいです。その回答の手法は左の div で機能しますが、右の div を次の行に押し下げます。問題を示すために、 CodePenで簡単なデモを作成しました。

すべての div が同じ行にあるように、これを修正する方法を提案できますか?

更新:すべての div 幅のパーセンテージを使用してこれを簡単に実行できることはわかっていますが、サイドバーの静的な幅を維持する必要があります。

4

2 に答える 2

3

これを行う 1 つの方法は、HTML の順序を変更することです (右側のサイドバーを左側のサイドバーの前に配置します)。

<div class="page-grid">
    <div class="sidebar right">
        <div>Right Widget 1</div>
        <div>Right Widget 2</div>
    </div>
    <div class="sidebar left">
        <div>Widget 1</div>
        <div>Widget 2</div>
    </div>
 <div id="content">Content area</div>
</div>

http://codepen.io/anon/pen/kHmjd

于 2013-09-11T20:55:06.877 に答える
1

これは、Dynamic Drive のCSS レイアウトの例を使用しています

特にコンテンツの順序が意味的に保持されるため、これが気に入っています。最初にメイン コンテンツが配信され、その後に両サイド コラムが配信されます。

HTML

<div class="page-grid">
    <div id="contentwrapper">
        <div id="content">Content area</div>
    </div>
    <div class="sidebar left">
        <div>Widget 1</div>
        <div>Widget 2</div>
    </div>
    <div class="sidebar right">
        <div>Right Widget 1</div>
        <div>Right Widget 2</div>
    </div>
</div>

CSS

#contentwrapper {
    float: left;
    width: 100%;
}
#content {
    margin: 0 15em;
}
.sidebar {
    float: left;
    width: 15em;
}
.sidebar.left {
    margin-left: -100%;
}

.sidebar.right {
    margin-left: -15em;
}
于 2013-09-11T21:12:39.093 に答える