html - CSS の幅と列の問題

Question

ここで何が間違っているのかわかりません。3 列のレイアウトの幅と余白を使用しており、右側のサイドバーを左側の余白に広げたいと考えています。

しかし、#sidebar-right の幅を 22% より大きくすると、両方のサイドバーがコンテンツの下にドロップダウンします。幅とマージンの組み合わせに関係する何かがありません。

HTMLとCSSは画像の下にあります。それが違いを生む場合、これはレスポンシブ構造でもあります。WordPress のテーマであるため、この CSS と HTML を使用する必要があり、別のタイプの CSS 列またはボックス構造に移行したくありません。

Update 10/23/12 現在の CSS と HTML を適応させるのをあきらめて、ページテンプレートのボックスレイアウトモデル CSS に変更しました。

何か案は？

ここに画像の説明を入力

HTML:

    <body class="three-column">

    <div id="page">
    <div id="main">
    <div id="primary">
    <div id="content" role="main">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.

    </div>
    </div>

    <div id="sidebar-right">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.

    </div>

    <div id="sidebar-left">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.

    </div>
    </div>
    </div> (some closing divs omitted for clarity).

CSS:

#page {
margin: 1em auto;
max-width: 1075px;
}

#main #secondary {
float: none;
margin: 0 7.6%;
width: auto;
}

.three-column #page {
max-width: 1075px;
}

.three-column #primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}

.three-column #content {
margin: 0 34% 0 20%;
width: 44%;
border:1px solid #c2c2c2;
padding:10px;
}

.three-column #sidebar-right {
float: right;
margin-right: 1.5%;
width: 22%;
border:1px solid #c2c2c2;
padding:10px;
}

.three-column #sidebar-left{
position:relative;
float: left;
width: 15%;
margin-left: -72%;
border:1px solid #c2c2c2;
padding:10px;
}

score 7 · Accepted Answer

問題は、#primary の右マージンが -26.4%、#sidebar-left の左マージンが -72% です。

それらを調整してフィドルを作成しました。サイドバーの左マージンを下げ (ただし、パディングのために 1.5% を維持)、#primary の右マージンを -100% に調整しました。

http://jsfiddle.net/mstauffer/CtkyN/1/

これはまだかなりハックです。できる方法があれば、HTML と CSS を再加工することで、はるかに優れたエクスペリエンスが得られます..しかし、そうでない場合は、そのフィドルを使用して、少なくともこの既存のフレームワーク内で必要に応じて右側のサイドバーのサイズを変更できます.

更新:信頼できる情報源はありませんが、CSS の計算については説明できます。一般に、#primary で負のマージンを使用して、他の 2 つの div を #primary が通常占有する領域に配置します。通常、このように div をオーバーラップさせる唯一の方法は、それらをposition: fixedまたはに設定することposition: absoluteです。これらは非常に難しいため、通常、このようなレイアウトは 3 つの左フロート (または将来的にはフレックスボックス) で実現されますが、HTML の順序が原因でそれは不可能です。

代わりに、CSS レンダラーに #primary がオーバーレイされてもかまわないことを納得させる必要があります... これは、-100% の負のマージンを設定することによって行います。重ねていただいても結構です。」スペースを開けたら、左右のフロート (および幅の制限) を使用して、#content の両側の空白スペースにサイドバーを配置します。

それが役立つことを願っています！

score 0 · Accepted Answer

編集：同じCSSを使用する必要があるというコメントは表示されませんでした。おそらくこれはあなたが現在持っているものに加えて使用することができますが、そうでない場合は無視してください。

行流体をdivスパンと一緒に使用すると、多くの問題を発生させることなくそれらをスケーリングできます。CSSはフィドラーです。

http://jsfiddle.net/GeyHC/1/

<div class="row-fluid">
    <div class="span2" id="content" role="main" style="border:1px solid #c2c2c2;">

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
        quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
        imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
        et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.

    </div>

    <div class="span6" id="sidebar-right" style="border:1px solid #c2c2c2;">

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
        quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
        imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
        et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.

    </div>

    <div class="span2 offset1" id="sidebar-left" style="border:1px solid #c2c2c2;">

        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
        quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
        imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
        et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.

    </div>
</div>

score 0 · Accepted Answer

.three-column #contentdiv は中央のコンテンツであり、div 幅 + パディングとして左マージンと#sidebar-leftdiv 幅 + パディングとして右マージン#sidebar-rightが必要であり、中央コンテンツの幅を修正する必要はありません。

サンプルとコードを確認してください。

score 0 · Accepted Answer

このコードを使用してください:-

HTML

<body class="three-column">

    <div id="page">
    <div id="main">
    <div id="primary">
    <div id="sidebar-left">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.

    </div> 
    <div id="content" role="main">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.

    </div>
    </div>

    <div id="sidebar-right">

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.

    </div>


    </div>
    </div> (some closing divs omitted for clarity).

CSS

#page {
margin: 1em auto;
max-width: 1075px;
}

#main #secondary {
float: none;
margin: 0 7.6%;
width: auto;
}

.three-column #page {
max-width: 1075px;
}

.three-column #primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}

.three-column #sidebar-left{
position:relative;
float: left;
width: 15%;
}

.three-column #content {
margin: 0 34% 0 20%;
width: 44%;
border:1px solid #c2c2c2;
padding:10px;
float: left;
}

.three-column #sidebar-right {
float: left;
margin-right: 1.5%;
width: 22%;
border:1px solid #c2c2c2;
padding:10px;
}

score 0 · Accepted Answer

非常に簡単ですが、パディングがコンテンツの幅に追加されていることを忘れているので、幅が 20%、マージンが 10%、両側に 10% の 3 つの div がある場合、必要な 100% を超えてしまいます。で動く。

JSfiddle の作業はこちら

score 0 · Accepted Answer

編集：

私はあなたのために働くかもしれない3列のレイアウトをしました。

HTML

<body class="three-column">
    <div id="page">
        <div id="main">
            <div id="primary">
                <div id="container">
                    <div id="sidebar-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
                    </div>

                    <div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
                    </div>

                    <div id="sidebar-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

CSS

#container {
    text-align: left;
    margin: 0px auto;
    padding: 0px;
    border:0;
    width: 80%;
}

#sidebar-left {
    float: left;
    width: 30%;   
    min-height: 300px;
    background-color: #cccccc;
}

#sidebar-right {
    float: left;
    width: 25%;
    min-height: 300px;
    background-color: #cccccc;
}

#content { 
    float: left;
    width: 30%;
    min-height: 300px;
    background-color: #999999;
}

また、境界線があるとレイアウトに問題が生じることにも気付きました。以下を追加すると、境界線を div 内に保持するのに役立ちます。

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;

この記事を参照してください。

お役に立てれば。

score 0 · Accepted Answer

問題は特にここにあると思います：

.three-column #content {
margin: 0 34% 0 20%;
}

margin: 右上、左下。

したがって、右側のサイドバーを拡張するには、右マージンを減らす必要があります。
試してはいけません。テストしたほうがいいです。

score 0 · Accepted Answer

他の人はすでにあなたに説明を与えています。問題を簡単に確認できるように、視覚的な表現を追加したかっただけです。問題の領域

html - CSS の幅と列の問題

8 に答える 8

Related

Reference