溢出-X不起作用

这是我代码溢出-X不起作用

<!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固定。

我试图宽度更改为5000px，和它的工作，但宽度超过盒子

来源

2012-11-07 Sieryuu

Demo - Jsfiddle Demo

HI现在添加一些性质

像这样

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

Live demo

来源

2012-11-07 07:55:33

+1。漂亮的解决方案，纯CSS。我正在尝试做同样的事情，但我错过了“空白区域：nowrap”，这似乎是使其工作的必要条件。如果没有这一行，只有当页面中有足够的空间时，这些框才会水平显示，但如果没有空格，某些框会转到新行。 –

-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-x和overflow-y作为后备之前，您可能需要添加overflow: auto。

代码示例：http://jsfiddle.net/zvs4H/1/

来源

2012-11-07 07:44:37 iMoses

是个用任何其他方式，而不是使用js？ – Sieryuu

何时添加框？你知道会有多少事先提前？ – iMoses

我使用PHP生成框，框的总和取决于'Database'记录，所以我很难用js来设置宽度 – Sieryuu

让您.box divdisplay: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; 
    }

Edited Demo

来源

2012-11-07 07:47:43 freebird

感谢您的答案，但我想要的结果是所有**框**水平显示只有1行。 – Sieryuu

溢出-X不起作用

回答

相关问题