0

私はCSSを学び、最初はかなり基本的なはずのことをやろうとしていますが、理解できないようです。私が古い方法でやったことは、次のようなものだったでしょう。

<table width="100%">
  <tr>
    <td>content area</td>
    <td width="200">ads, links, whatever</td>
  </tr>
</table>

右側のサイドバー領域をXピクセル幅に設定したい。ページの残りの部分をコンテンツ領域で埋めたい。一定の幅に設定するのは簡単なので、問題全体のように見えるのはこの後の部分です。

私はなんとか自分の望む行動をとることができました。2つの「position：absolute」を使用し、コンテンツ列の右マージンをサイドバー列の幅に設定することで、右側にX幅の列を、左側に1つの列を作成して残りを埋めることができました。 。

私がこれを行うと、コンテンツdivの高さは非常に小さくなります。このdivに、サイドバーの内容とコンテンツの内容の背後にある特別な色を設定したいので、これは機能しません。

私はこれを死ぬまで調査し、絶対位置にあるものの後に「div style ='clear：both'>」を追加しようとしましたが、これは何もしませんでした。何か案は？

HTML： 

<html>
    <head>
        <title>FIRST TRY</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="content">
            <div id="left">
                <p>Dolor consuetudium putamus nunc illum at. Qui vel accumsan zzril odio feugait. Iriure nobis aliquam est qui nam. Est ii ad et quod consuetudium. Eu vero tation placerat illum dolore. Suscipit saepius aliquip commodo erat me. Consequat littera autem anteposuerit ullamcorper dolor. Legunt doming dignissim facer futurum quinta. Consuetudium ad magna tempor ut suscipit. Typi aliquam ex esse quarta qui.</p>

                <br />

                <p><a href="http://css-tricks.com/examples/SuperSimpleTwoColumn.zip">Download this example.</a></p>
            </div>
            <div id="right">
                RIGHT
            </div>
            <div style="clear: both"></div>
        </div>
    </body>
</html>

CSS：

#content {
    border: 1px solid red;
    padding: 5px;
    position: relative;
}

#left {
    border: 1px solid green;
    float: left;
    margin-right: 200px;
    position: absolute;
    top: 0;
    left: 0;
}

#right {
    border: 1px solid blue;
    float: right;
    width: 200px;
    position: absolute;
    top: 0;
    right: 0;
}

結果： ここに画像の説明を入力してください

私が特に望んでいるのは、赤いボックスが他の2つを完全に包含することです。

助けてくれてありがとう。

4

4 に答える 4

3

次の例は、固定幅の右列を持つ流動的な左列を示しています。

サイドバーの幅を変更するには：

  1. マージンを調整します-右に.left-col
  2. の幅を調整し.right-colます。

次に例を示します（フィドル）：http：//jsfiddle.net/simshaun/8szTV/

HTML：

<div class="cf">
    <div class="left-col-wrap">
        <div class="left-col"></div>
    </div>
    <div class="right-col"></div>
</div>
text text text textext text t text ttext text text textext text 
text textext text t t exttext text text text

CSS ：

.left-col-wrap {
    float: left;
    width: 100%;
}
.left-col {
    margin-right: 220px;
}
.right-col {
    float: right;
    margin-left: -200px;
    width: 200px;
}

/** Micro clearix */
.cf:before, .cf:after {
    content: " ";
    display: table;
}
.cf:after { clear: both; }
.cf { *zoom: 1; }

/** Just for visual debugging purposes: **/
body {
    margin: 20px;
}
.left-col {
    background: #FF0000;
}
.right-col {
    background: #00FF00;
}
.left-col {
    height: 200px;
}
.right-col {
    height: 400px;
}
于 2012-08-27T21:21:49.063 に答える
2

これは、古典的な2列のレイアウトの問題です。基本的にあなたがしたいことはこのような単純な構造を持つことです：

<div id="wrapper">
    <div id="sidebar">sidebar content here</div>
    Other content here.
</div>

次に、サイドバーを右に配置するには、に適用float: rightし#sidebarます。JSFiddleの例を作成しました。境界線を適用する#wrapperと、全体が囲まれます。

position: absolute要素の1つで宣言したため、上記のコードで境界線が適用されない理由。これにより、要素がDOMから効果的に削除されるため#content、絶対位置にある要素をその子と見なすことがなくなり、レンダリングを試みるときに完全に無視されます。

編集

サイドバーをコンテンツから独立させる（つまり、コンテンツが下部に折り返されないようにする）のは簡単な修正です。次のようにHTMLを更新します。

<div id="wrapper">
    <div id="content">        Other content here.</div>
    <div id="sidebar">sidebar content here</div>
    <div class="clearfix"></div>
</div>

次に、CSSをに変更float: leftし#content、サイドバーにパディングを加えたものと同じ幅のマージン右を指定します。にを追加margin-leftします。これはon#sidebarと同じです。そして、clearfixは単純です。margin-right#content.clearfix { clear: both; }

JSFiddleの例を更新しました。

于 2012-08-27T21:21:30.690 に答える
1

このような何かがうまくいけばあなたを正しい道に導くはずです：

http://jsfiddle.net/tVWxv/

于 2012-08-27T21:20:55.013 に答える
0

必要なのは、ラッパー<div id="content">が子コンテナーの高さを採用することです。子コンテナは絶対に配置されているため、これは機能しません。それらを左右にフロートさせ（絶対位置に配置した場合も機能しません）、子コンテナの幅を指定します。

于 2012-08-27T21:29:39.187 に答える