0

我想创建一个特定高度和宽度的 x 可滚动面板，其中 DIV 应位于左侧或底部的一行中（请参阅此示例：http: //jsbin.com/ohahac/1/edit）。我想让这个面板只能向左滚动。

我在这里错过了什么或做错了什么？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML+RDFa 1.1//EN">

<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>untitled</title>
        <meta name="generator" content="TextMate http://macromates.com/">
        <meta name="author" content="headkit-studio">
        <!-- Date: 2013-03-21 -->
        <style>
            *{
                margin:0;
                padding:0;
            }
            .blockdiv{
                height: 500px;
                float:left;
                min-height:400px;
            }

        </style>

    </head>
    <body>
        <div id="main" style="overflow:hidden;">
            <div class="leftbar" style="width:150px; height: 500px; position: relative; float: left; display: inline; background-color:black;">LEFT</div>
            <div id="content" style="width:100%">
                <div class="section">
                    <div class="region" style="overflow-x:scroll; width:1200px; border:1px dotted black; height: 500px;">
                        <div id="01" class="blockdiv" style="background-color:yellow; width:450px">1</div>
                        <div id="01" class="blockdiv" style="background-color:blue; width:690px">2</div>
                        <div id="01" class="blockdiv" style="background-color:silver; width:500px">3</div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

谢谢！！

编辑：适用于空白：nowrap；（看看： http: //jsbin.com/ohahac）但是这个解决方案在 div 元素之间增加了一些差距！垂直滚动条也是不行的。:-(

4

1 回答 1

1

你inline-block只想要。不适用于区域包装器float:left 。white-space:nowrap;

http://jsbin.com/ohahac/15/edit

这是一个更简单的

http://jsfiddle.net/btevfik/JuEVy/

于 2013-03-21T11:59:28.337 回答