溢出-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不起作用

回答

相關問題