2

さまざまな都市のスカイラインを含むWebサイトのヘッダーを作成しています。表示する都市を簡単に変更できるように、都市ごとに一意のdivを設計しました。これは、ヘッダーにドロップするだけです。各divの背景画像を設定し、次のように配置します。

<header>
  <div class='skyline'>
    <div id='la'></div>
    <div id='seattle'></div>
    <div id='paris'></div>
    <div id='chicago'></div>
    <div id='london'></div>
  </div>
</header>

私が抱えている問題は、最後の1つがページから削除され、右端に空白が残ることです。画面の端を越えて流れるようにしたいので、ユーザーはウィンドウの幅に収まるものをすべて見ることができます。私のCSSは次のようになります：

.skyline {
  background: #fff;
  background-position: 0px 0px;
  overflow: hidden;
  height: 113px;
  width: 100%;
}
.skyline div {
  display: inline-block;
  height: 113px;
  float: left;
  overflow: visible;
}
.skyline #la {
  width: 320px;
  background-image: url('/img/skyline/la.png');
}

他のすべてのdivのcssは同じですが、ソースイメージと幅が異なります。

これを（変更して）jsfiddleに配置して、取得している動作を示します。ウィンドウのサイズを変更するだけで、何が起こっているかがわかります。

これを修正するにはどうすればよいですか？htmlの構造を少し変えてもいいのですが、同じままにしておけばよかったと思います。

4

2 に答える 2

1

これを試して

.skyline {
  background: #fff;
  background-position: 0px 0px;
  height: 113px;
  width: 1000px; /* Changed from 100% & removed overflow */
}
于 2012-08-26T19:14:53.227 に答える
1

水平スクロールバーが表示されないように含む要素を設定するoverflow: hidden;必要があります。また、フロートdivのコンテナの合計幅を指定して、右端まで移動するようにする必要があります。そうでなければ、彼らは押し下げられます。絶対位置を使用してこれに対抗することもできますが、このソリューションの方が簡単だと思います。

このようにhttp：//jsfiddle.net/xLwML/17/

于 2012-08-26T20:21:20.190 に答える