私は、ページの左側にあるコンテナー(テキスト付き)を持っています。利用可能なスペースがに適合すると、右側に2つのサイドバーがあります(私はWordpressを使用しています)。 (2つのサイドバーはfloat
で正常に動作します。)だから私はwidth:auto
をコンテナに貼り付けました。"width auto"と "float"を使ってdivを整列する方法は?
しかし、利用可能な残りの領域には適応しません(すべてのページ幅が必要です)。幅を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;
}
おかげ
EDIT:
のは、私が代わりにWordPressのサイドバーの、これは使用していましょう:誰かが見ている可能性があり、私はまだそれを動作させるために管理することはできませんこの単純なコードで?緑1、赤1 ...
<!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>
これを行う簡単な方法は、記事用のテンプレートを編集することです。サイドバーが1つだけの場合は、コンテナ用の特別なCSSがあります。 – OptimusCrime
@OptimusCrime:ありがとう、あなたはもっと具体的になりますか?私はHTMLで "style ="属性を使うべきですか?それはCSSファイルを上書きしますか? – Paul
コンテナの内側に2つのサイドバーがありますか? –