Question

我想知道如何在水平线上实现一条滚动div框，它跨越浏览器的整个宽度。

<style>
.block_box{min-height:300px;overflow:hidden;position:absolute;top:400px;}
.block{ float:left; width:200;height:300px;background:grey;margin:10px;padding:20px;}</style>

<div class="block_box">
                <div class="block">1</div>
                <div class="block">2</div>
                <div class="block">3</div>
                <div class="block">4</div>
                <div class="block">5</div>
                <div class="block">6</div>
                <div class="block">7</div>
                <div class="block">8</div>
            </div>

我试过但是在4或5块之后它没有隐藏在浏览器后面而是刹车到新线

Answer 1

在您的CSS中添加display:inline和white-space:nowrap;

.block_box{min-height:300px;overflow:hidden;position:absolute;top:400px;}
.block{ float:left; display:inline; white-space:nowrap; width:200;height:300px;background:grey;margin:10px;padding:20px;}

Here是关于白空间的。 More detailed explanation

Answer 2

这是一个关于你想要的演示的小提琴：

http://jsbin.com/anekos/1/edit

新CSS：

.block_box{ height:320px; width:100%; overflow:auto;top:100px;}
.block{display: table-cell; min-width:200px;height:300px;background:grey;margin:10px;padding:20px;

Answer 3

使用百分比表示每个块的宽度，使其符合浏览器的宽度。

Answer 4

您需要在div上设置“block_box”类的宽度

Answer 5

尝试将overflow-x: scroll; css样式应用于.block_box div。

Answer 6

尝试将固定宽度的外部div放置。然后像这样使用overflow-x:auto属性

HTML代码：

<div class="outer_div">
    <div class="block_box">
                <div class="block">1</div>
                <div class="block">2</div>
                <div class="block">3</div>
                <div class="block">4</div>
                <div class="block">5</div>
                <div class="block">6</div>
                <div class="block">7</div>

     </div>
</div>

CSS：

.block_box{height:200px;width:800px;overflow:hidden;position:absolute;top:400px;}
.block{ float:left; width:100;height:200px;background:grey;margin:10px;padding:20px;}
.outer_div{ width: 500px; overflow-x:auto;}

以下是工作演示：http://jsfiddle.net/AQr6h/2/

滚动div框

6 个答案: