フロートを使用したデザイン：左右。使用例

Question

私のウェブページのヘッダーのデザインに関するアドバイスを受けたいと思います。

その設計の一般的な構造を以下に示す：

そのHTML部分：

<div class="header"> 
    <div class="logo1"></div> 
    <div class="logo2"></div> 
</div> 

そのCSSの一部：

.header{ 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 160px; 
    border: 1px solid #48ace1; 
} 

.logo1{ 
    float: left; 
    width: 655px; 
    height: 160px; 
    background: url(images/logo1.png) no-repeat 0px 2px; 
} 

.logo2{ 
    float: right; 
    width: 465px; 
    height: 160px; 
    background: url(images/logo2.png) no-repeat 0px 2px; 
    position: relative; /* it is set to relative because inside this layer I have 
          several elements with absolute position.*/ 
} 

問題：

私は何の問題もなく、それは完全に開いたワイドスクリーンを備えたコンピュータに、このWebページを開くことが、私は小を持つコンピュータでそれを開いたとき次の図に示すように、幅スクリーン第ロゴ（.logo2）は次の行に倒れ：

この合計で.logo1と.logo2の幅が655px+465px=1120pxであるために発生します。したがって、ブラウザの幅が1200ピクセル以下になると、.headerの内部に2番目のロゴ（.logo2）が見つからずに自動的に次の行に落ちます。このような場合には

が、私は、ブラウザの幅は2つのロゴの幅の合計その後、小さい場合 .logo1と重なるように .logo2をしたい（ .logo1と .logo2私の場合には、多かれ少なかれ1200px）。この影響をどのように達成できますか？左手には .logo1、右手には .logo2が必要です。

ありがとうございます。

Answer 1

なぜfloatを使用しますか？あなたはその中間のCSS配置を使用していますposition:absolute;！ http://jsfiddle.net/6sFY5/1/

Answer 2

はそうのように、LOGO1に負のマージンを追加します。

.logo1 
{ 
    float: left; 
    width: 655px; 
    margin-right: -655px; 
    height: 160px; 
    background: url(images/logo1.png) no-repeat 0px 2px; 
} 

これは、ウィンドウは、できるだけ狭い得ることができますを意味します、そしてロゴ2が落下することはありません。

編集されました。最初の試行でも655px未満の幅でロゴ2が引き続き作成されるため、編集されました。

編集2：それはあなたが望むものであるならば、それは、LOGO1をカバーするように、あなたはまた、.logo2上のzインデックスを設定することができます。

Answer 3

<div class="header"> 
    <div class="logo1"></div> 
    <div class="logo2"></div> 
    <div style="clear:both"></div> 
</div> 

Answer 4

あなたは絶対位置を使用することができ、これを試してみてください：ミスを犯した

http://jsfiddle.net/LuRDk/

.header{ 
    position:relative; 
    height:84px; 
    padding:20px; 
    border:1px solid green; 
} 

.logo{ 
    position:absolute; 
    width:80px; 
    height: 80px; 
    border:1px solid red; 
} 

.right{right:20px;} 
.left{left:20px;} 

<div class="header"> 
    <div class="logo left"></div> 
    <div class="logo right"></div> 
</div>