2009-03-30 10 views
0

コンテナdivに3つのdivがあります。最初のものが左に浮かび、2番目のものが右に浮かび、最後のものが中央に座ります。これは、コンテナdivに3つのおよそ偶数のdivを作成します。右フロートとコンテナdiv

これらのdivのそれぞれでは、さまざまな高さの画像を配置しています。次に、コンテナdivの下に座る独立したdivがあります(これはdescription divと呼ばれます)。

コンテナdivをイメージdivの高さに伸ばして、イメージdivがイメージの下にうまく収まるようにします。現在のところ、左の浮動小数点と中位のdivには最大の画像が含まれ、右の浮動小数点のdivには含まれません。私は何かがなぜ迷っているのか分からない。

注:絶対値を使用せずにこれを行うようにしています。ちょうどパーセンテージです。だから私はコンテナのdivに絶対的な高さを宣言したくない!また、これは単純化されているので、clearは機能しません。そして、上記の入れ子divで浮動小数点数だけをクリアすることができない限り、実際には、このすべての周りに他のdivコンテナがたくさんあります。私の頭の中に残ってthatsのいずれかの髪を維持しようと、任意の助けを事前に

<html> 
<head> 
    <style> 
     #b_pics { 
      border: 2px solid grey; 
      width: 100%; 
     } 
     #b_pic1 { 
      border: 0px solid grey; 
      float:left; 
      width:33%; 
     } 
     #b_pic2 { 
      border: 0px solid grey; 
      margin: 0px auto; 
      width: 33% 
     } 
     #b_pic3 { 
      border: 0px solid grey; 
      float:right; 
      width:33%; 
     } 
     #b_website { 
      border: 1px solid grey; 
      width:100%; 
     } 
    </style> 
</head> 
<body> 
    <div id='b_pics'> 
     <div id='b_pic1'> 
      Image 1 here  
     </div> 
     <div id='b_pic3'> 
      Image 3 here    
     </div> 
     <div id='b_pic2'> 
      Image 2 here      
     </div> 
    </div> 
    <div id='b_website'> 
     Line of text goes here 
    </div> 
</body> 

ありがとう:

は、ここでは、コードです!

+1

誰かがダウン投票をしていて、質問とすべての回答を下落させているようです。奇妙な。 – SpoonMeiser

答えて

-1

thisをショットします。何もハードコードされていないので、あなたが望むことをしなければなりません。

1

要素を含む要素は、フローティングdivを格納するために伸縮しません。あなたの例では、divを含むdivは実際の内容を持たないため、0ピクセル高くなります。これを説明するために、境界線または背景色を変更してみてください。

あなたはそれをスタイルを与えることによって、任意の浮動divを下回るように要素を強制することができます

clear: both; 

あなたはまた、明確なだけ浮動divを左または右にすることができます。

b_picsコンテナを浮動要素に合わせて伸ばすために、そのスタイルを持つ3つの画像divの後に空のdivを追加することができます。あるいは、b_website divを両方とも消去することもできます。

+0

コメントをいただきありがとうございます、私はそれらを働かせようとしています、私は非常に近いと思われます。私は引き続き問題がある場合は、より詳細なコードを投稿します。 THnaks –

0

私はSpoonMeiserの回答に全く同意します。私は同じ問題(IEの場合のみ)と明確な追加:両方の(私の場合はdiv)が動作するように思われる唯一の解決策です。

0

SpoonMeiserの説明は正しいです。ここであなたのために動作するいくつかのコードです。基本的には、コンテナdivの最後に "clear:both"という空のdivを追加しました。これは、コンテナに含まれているフローティングdivのスペースを強制的に使用します。

#b_website divを "clear:both"(SpoonMeiserの別の提案)にすると、#b_website divの表示が正しい場所になりますが、#b_picsの枠線がフローティングdivを囲むことがなくなるためです。

<div id='b_pics'> 
    <div id='b_pic1'> 
     Image 1 here</div> 
    <div id='b_pic3'> 
     Image 3 here 
    </div> 
    <div id='b_pic2'> 
     Image 2 here 
    </div> 
    <div style="clear:both;"></div> 
</div> 
<div id='b_website'> 
    Line of text goes here 
</div> 

私は役に立ちますか?