2012-05-11 3 views
4

私は、ページの左側にあるコンテナー(テキスト付き)を持っています。利用可能なスペースがに適合すると、右側に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> 
+0

これを行う簡単な方法は、記事用のテンプレートを編集することです。サイドバーが1つだけの場合は、コンテナ用の特別なCSSがあります。 – OptimusCrime

+0

@OptimusCrime:ありがとう、あなたはもっと具体的になりますか?私はHTMLで "style ="属性を使うべきですか?それはCSSファイルを上書きしますか? – Paul

+0

コンテナの内側に2つのサイドバーがありますか? –

答えて

1

[OK]を見つけたら、最後にテキストを置いて、オーバーフローを使用して:hiddenとauto、floatを使用してみてください。あなたの答えに感謝します。

3

幅:2箱はそこにいる、それはDIVが標準としてどうなるのか以外の何かをやってされることはありませんので、自動がデフォルト値で、これは、それはブロックレベルの要素なので、利用可能な幅を埋めることです。これは、浮動小数点数を変更すると変更され、その内容は最大幅までの任意の幅になる可能性があります。

あなたが実行している問題は、パーセンテージ幅と固定幅が混在していると思います。私はあなたがやろうとしていることを見ることができます - 固定幅のサイドバー(あるいは2つ)とページの残りの部分を柔軟にします。テーブルベースのレイアウトでこれをやり直すのは本当に簡単でしたが、そこに行こうとしませんでした!

流体レイアウトが必要ですが、列が2つ固定されているような音がします。 http://coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

+0

最近、グリッドシステムに基づいた応答性の高いレイアウトです。さまざまなデバイスのさまざまなサイズの弾性レイアウトがうまく機能します。 – howard10

+0

答えがありがとう、それは各サイドバーの20%で何も変わらないし、幅:コンテナに自動、他のアイデアがありますか? – Paul

+0

すべてのパーセンテージレイアウトに固執すれば、container:60%sidebar1:20%sidebar2:20%のようなことをします。幅:「自動的に残りのスペースを埋める」という意味ではないので、autoはあなたのために何もしません。それは容器が100%幅全体を満たし、サイドバーをその下に押すことを引き起こしている。 – howard10

1

display:parent divの表を使用します。次に、子供の上に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; 
} 
+0

http://codepen.io/jasonmcalpin/pen/qZoLQa – chaiboy

関連する問題