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>

thnx !!

編集：空白で正常に動作します：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 に答える