このdivとCSSの問題を助けてください

Question

私はpsdをスライスしています。必要なだけ多くの項目を繰り返す画面の部分があります。これはstackoverflowの質問リストと似ています。

これは、このような構造を持っている必要があります：

alt text http://i43.tinypic.com/k1xnxs.gif

それは可能ですか？どのようにCSSをする必要がありますか？

ありがとうございます！

Answer 1

問題は左のdivにあります。ここでは、「内容によっては幅が増える可能性があります」と書かれています。この幅はどのように定義されていますか？右のdivは残りのスペースの100％まで展開することができますが、左のdivに固定幅を指定するか、両方に100％に等しい割合を指定することによって、左と右のdivの関係を定義する必要があります。

Answer 2

これまで見てきたように、so.comはレイアウトの目標を達成するために固定幅divを使用していました。

私の最初の試みは、自動的に幅を設定しようとしませんでしたが、おそらく便利な回避策がありました。もちろん

<div style="border: 1px solid #000000; width: 60%"> 
    <div style="border: 1px solid #444444; float: left;"> 
    some text 
    </div> 
    <div style="border: 1px solid #999999; float: right;"> 
    foo 
    </div> 
</div> 

私が正しくあなたの質問を理解している場合、これが唯一のに役立ちます。）

Answer 3

次の操作を試みることができる：

<style type="text/css"> 
    #container { 
     width:60%; 
    } 

    #content { 
     width:100%; 
    } 

    #user-content { 
     float:left; 
    } 
</style> 

<div id="container"> 
    <div id="content"> 
     <div id="user-content"> 
      <p>This can change depending on what is in here.</p> 
     </div> 
     <!-- The rest of the page's content goes here. --> 
    </div> 
</div> 

これは「コンテンツ」の残りの部分を埋めるDIVます「ユーザコンテンツ」が満たされない空間。あなたのコンテンツは、ユーザーのコンテンツよりも背が高い...しかし、それは別の問題だときにのみ問題となります:)

これは別のpossiblityです：

<style type="text/css"> 
    #container { 
     width:60%; 
    } 

    #content { 
     width:100%; 
     float:left; 
    } 

    #user-content { 
     float:left; 
    } 

    #page-content { 
     float:left; 
    } 
</style> 

<div id="container"> 
    <div id="content"> 
     <div id="user-content"> 
      <p>This can change depending on what is in here.</p> 
     </div> 
     <div id="page-content"> 
      <p>This should take up the rest of the space.</p> 
     </div> 
    </div> 
</div> 

Answer 4

私の知る限りではする唯一の方法可変幅のコンテナに可変幅を与え、左に浮動させると幅は{width：auto; float：left;}になります。

しかし、私が知っていることは、テキスト、またはこのコンテナに入れるための小さな固定幅の項目がたくさんある場合は、先に進む前に外側divの幅を塗りつぶすまで、最初の行に沿って展開し続けます2行目に移動します。彼らは全体の高さをいっぱいにしていないし、テキストが含まれないように徐々に外側に押します。

Answer 5

ちょっと考えました - あなたが必要としているように、それらのdivのサイズを決める素晴らしいJavaScriptを（おそらくjQueryを使用していますか？）行うことができるかもしれません。