0

我想知道如何在横跨整个浏览器宽度的水平线上实现一条滚动 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 块之后它并没有隐藏在浏览器后面，而是刹车到新行

4

6 回答 6

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;}

这是关于空白的。更详细的解释

于 2013-04-30T17:54:30.100 回答
1

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

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;
于 2013-04-30T17:58:13.347 回答
0

尝试放置一个固定宽度的外部 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/

于 2013-04-30T18:21:08.887 回答
0

对每个块的宽度使用百分比，使其适合浏览器的宽度。

于 2013-04-30T17:52:31.890 回答
0

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

于 2013-04-30T17:53:38.153 回答
0

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

于 2013-04-30T17:53:51.047 回答