51

左側に固定幅の画像を持つ div と、背景色を持つ可変幅の div が必要です。これは、デバイスで幅を 100% 拡張する必要があります。2 番目の div が固定 div をオーバーフローするのを止めることはできません。

可変幅のdivにoverflow:hiddenを追加すると、写真の下の次の行にジャンプします。

これを正しい方法で修正するにはどうすればよいですか (つまり、後でメディア クエリを使用してサイトをレスポンシブにする必要があり、デバイスごとに他の解像度の画像で画像を変更する必要があるため、ハックやマージン左を使用しないでください)。

  • レスポンシブ Web サイトの恐ろしさに立ち向かおうとしている初心者の Web デザイナー -

HTML:

<div class="header"></div>
<div class="header-right"></div>

CSS:

.header{
    float:left;
    background-image: url('img/header.png');
    background-repeat: no-repeat;
    width: 240px;
    height: 100px;
    }

.header-right{
    float:left; 
    overflow:hidden; 
    background-color:#000;
    width: 100%;
    height: 100px;
    }
4

2 に答える 2

58

float:leftとwidth:100%を削除してみてください.header-right— すると、右divが要求どおりに動作します。

.header {
  float: left;
  background: #efefef;
  background-repeat: no-repeat;
  width: 240px;
  height: 100px;
}

.header-right {
  overflow: hidden; 
  background-color: #000;
  height: 100px;
}
<div class="header"></div>
<div class="header-right"></div>

于 2012-10-04T10:54:40.443 に答える