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

我试图将宽度更改为 5000 像素，它可以工作，但宽度超出了框

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 回答