1

これは私のコードです

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title></title>
  <style type="text/css">
    .bigbox {
      width:1024px;
      height:600px;
      background-color:#000000;
      overflow-x:auto;
      overflow-y:hidden;
    }
    .box{
      width:500px;
      height:500px;
      float:left;
      background-color:#AAAAAA;
      margin:5px;
    }
  </style>
  </head>
  <body>
    <div class="bigbox">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </body>
</html>

すべてのボックスを水平に表示するにはどうすればよいですか?

そして、bigboxにはscroll bar、width固定された 1 つがあります。

幅を 5000px に変更しようとしましたが、動作しますが、幅がボックスを超えています

4

3 に答える 3

6

デモ -- Jsfiddle デモ

HI いくつかのプロパティを追加

このように

    .bigbox {
    white-space:nowrap;
    }
    .box{
    float:left;  // remove this line 
    display:inline-block;
    vertical-align:top;
    }

ライブデモ

于 2012-11-07T07:55:33.183 に答える
1

あなたの.box div display:inline-block;

.bigbox {
      width:400px;
      height:600px;
      background-color:#000000;
      overflow-x:auto;
      overflow-y:hidden;
      white-space:nowrap;
    }
    .box{
      width:100px;
      height:100px;
      float:left;
      background-color:#AAAAAA;
      margin:5px;
    display:inline-block;
    }​

編集されたデモ

于 2012-11-07T07:47:43.337 に答える
-1

（私が知る限り）最も簡単な方法は、すべての.box要素をラップし、それらの親の幅をすべての子の幅の合計として定義することです。

コード例では、次のようになります。

CSS：

.boxview {
    width: 3060px;
}

HTML：

<div class="bigbox">
  <div class="boxview">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

ボックスの数に接頭辞が付いていない場合は、JavaScriptを使用して.boxview幅を動的に設定することをお勧めします。

overflow-xまた、古いブラウザ（IE9 +のみ）では機能しないことに注意してください。

overflow: auto定義する前にoverflow-x、overflow-yフォールバックとして追加することをお勧めします。

コード例： http： //jsfiddle.net/zvs4H/1/

于 2012-11-07T07:44:37.240 に答える