2009-05-21 7 views
0

2つのdivを並べて配置し、1つはロゴを、もう1つはテキストフィールドを含みます。このページをより大きな解像度で見ると、すべてが問題なくなります。しかし、私はウィンドウのサイズを変更すると、2番目のdivもシットになり、1番目のdivの下に来る。ウィンドウのサイズを変更するとDivセクションがシフトします

しかし、私は彼らがどんな解像度でも横に並んでいてほしいと思っています。このためのコードソリューションを親切に提供してください。

+1

あなたが最良の解決策に影響を与える可能性があり、いくつかの方法があるので、あなたがこれを達成している方法についていくつかのコードを提供する必要があります。 – cjk

答えて

0

基本的に2番目のdivは、適合しない場合はどこかに行く必要があります。あなたのケースでは、唯一のオプションは、オーバーフロー:divでdiv内の行を折り返すようにすることです。

4

フロートを使用して、隣り合わせに配置すると思います。あなたは、ページがで表示したい最小の幅の別のdivを持つ2つのdiv要素の周りにラップすることができます 最初の1

<div id="wrapper"> 
    <div id="logo">...</div> 
    <div id="text">...</div> 
</div> 

下に落下秒1を停止すること、それは次のようになりのスタイル:

#wrapper { width: 980px; } 
#wrapper div { float: left; } 
#logo { width: 200px; } 
#text { width: 780px; } 

そのようなものです。 誰かがウィンドウのサイズを980pxよりも狭くする(または低いスクリーン解像度を使用する)場合、水平スクロールが表示されます。

//コメントに対応して を編集すると、より柔軟にするために最小幅を使用できます。 IE

#wrapper { min-width: 980px; } 
#wrapper div { float: left; } 
#logo { width: 200px; } 
#text { min-width: 780px; } 

最小幅はIE6でサポートされていないため、修正が必要な場合があります。

+1

実際には、#wrapperの幅を固定に設定すると、デザインの「流動性」が損なわれる可能性があります。ページを固定幅にする場合は、幅が、または最上部コンテナdivの幅が常により良い方がよいでしょう。子ノードは幅について心配する必要はありません。 – jrharshath

+0

が同意します。 kaushikは、動作するための要件やコードサンプルを提供していません –

0

2番目のdivは、コンテナ内に十分な幅がなく、両方を並べて配置できるため、最初のdivの下にスライドします。

  1. 変化コンテナノードに「隠れた」(またはオーバーフロー)の「オーバーフロー」プロパティ:

    これは、2つの方法で改善することができます。

  2. コンテナの「最小幅」を設定します。しかし、このアプローチは、IEに必要な特別なハックに悩まされています。また、通常、最小幅のアプローチは突然実行できません。ページデザインの開始から計画する必要があります。

希望があれば。

乾杯!

0

私は両方のdivsの合計から1%少ない(1%未使用)の合計を保とうとしました....私のために働くようです:) Myabeは誰かにとって有益です。

CSS:

#Content { 
width: 100%; 
height: auto; 
margin-top: 26px; 
float: left; 

} 
#ContentLeft { 
margin-left: 5px; 
float: left; 
width: 19%; 
} 

#ContentMain { 
width: 80%; 
margin-right: 5px; 
float: right; 
} 

HTML:

<html> 
<body> 
<div id="Content"> 
<div id="ContentLeft">Left menu</div> 
<div id="ContentMain">Here goes the bigger content</div> 
</div> 
</body> 
</html> 
0

はあなたの10pxの(マージン左マージン+右)は、より1%あるだけのことです。 これは動作するはずです:

#Content { 
width: 100%; 
height: auto; 
margin-top: 26px; 
float: left; 
} 

#ContentLeft { 
margin-left: 1%; 
float: left; 
width: 19%; 
} 

#ContentMain { 
width: 79%; 
margin-right: 1%; 
float: right; 
} 
関連する問題