5

ページの左側に、使用可能なスペースに適応するコンテナー（テキスト付き）と、右側に続く2つのサイドバー（Wordpressを使用しています）が必要です。（2つのサイドバーはで正常に動作しfloatます。）それで私width:autoはコンテナを試してみました。

ただし、使用可能な残りのスペースには適応しません（すべてのページ幅が必要です）。幅を70％に設定すると、インデックスページのスペースに収まりますが、記事をクリックすると、サイドバーが1つしか残っていないため、テキストとサイドバーの間に空白があります。

これを修正する方法を知っていますか？

#container { /* the text */
    overflow:auto;
    width:auto;
    position:relative;
    float:left;
}

#primary { /* first sidebar */
    position:relative;
    border:1px solid red;
    float:right;
    width:250px;
}


#second { /* second sidebar */
    border:1px solid red;
    background:white;
    width:250px;
    height:auto;
    float:right;
    margin-left:15px;
}

ありがとう

編集 ：

ワードプレスのサイドバーの代わりにこれを使用しているとしましょう：私はまだそれを機能させることができません、誰かがこの単純なコードを見てみることができますか？2つのボックスがあります：緑のボックスと赤のボックス...

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8" />
    </head>
        <body>

            <div style="position:relative; width:700px; margin:0 auto;">
                <div style="width:auto; border:1px solid green;">i would like to have a container (with some text) on the left of the page, that adapts itself with the space available, and 2 sidebars following on the right (i'm using Wordpress). (The 2 sidebars work fine with float. ) So i tried width:auto on the container.

But it does not adapt itself with the rest of the space available (it takes all the page width). If i set the width to 70%, it fits the space on the index page, but if i click on an article, i only have 1 sidebar left, so there is a blank space between the text and the sidebar.</div>

<div style="width:20%; float:right; border:1px solid red;">blablabla</div>
            </div>

        </body>
</html>
4

3 に答える 3

3

width：autoはデフォルト値であるため、DIVが標準で行うこと以外は何もしません。これは、ブロックレベルの要素であるため、使用可能な幅を埋めることです。これはフロートすると変化し、コンテンツをラップするため、最大幅までの任意の幅にすることができます。

あなたが直面している問題は、パーセンテージ幅と固定幅の混合だと思います。私はあなたがやろうとしていることを見ることができます-固定幅のサイドバー（または2つ）とページの残りの部分を柔軟にします。テーブルベースのレイアウトの時代にこれを行うのは本当に簡単でしたが、そこには行かないでください！

流動的なレイアウトが必要なように聞こえますが、2つは列で固定されています。この記事を読んで、あなたがやろうとしていることに何かが合っているかどうかを確認する価値があるかもしれません：http: //coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout- whats-the-right-one-for-you /

于 2012-05-11T08:54:28.937 に答える
2

親divでdisplay：tableを使用します。次に、子にdisplay：table-cellを表示します。テーブルの場合と同じように配置します。

#container { /* the text */
    overflow:auto;
    width:auto;
    position:relative;
    // float:left;
    display: table-cell;
    vertical-align:top;
}

#primary { /* first sidebar */
    position:relative;
    border:1px solid red;
    // float:right;
    width:250px;
    vertical-align:top;
}


#second { /* second sidebar */
    border:1px solid red;
    background:white;
    width:250px;
    height:auto;
    // float:right;
    margin-left:15px;
    display: table-cell;
    vertical-align:top;
}
于 2016-04-14T21:06:51.470 に答える
1

わかりました。テキストを最後に配置し、overflow：hiddenとautoを使用して、右側の小さなコンテナに浮かびます。回答ありがとうございます。

于 2012-05-14T02:01:02.200 に答える