1

各リスト項目/子 div がフルスクリーン (幅 100%、高さ 100%) で左にフロートする UL または DIV を作成しようとしています。これにより、それらを水平方向にスクロールできます。ここに私のコードがありますが、思ったように機能していません

HTML:

<html>
<body>

<div id="site-holder">

   <div class="toronto-full">
   TESTING
   </div>

   <div class="montreal-full">
   TESTING
   </div>

</div>

</body>
</html>

CSS:

html { width:150%; height:100%; margin:0; padding:0; }
body { width:150%; height:100%; margin:0; padding:0; }

#site-holder { width:100%; height:100%; margin:0; padding:0; float:left; }

.toronto-full {background-color:green; width:50%; height:100%; float:left; }
.montreal-full {background-color:red; width:50%; height:100%; float:left; }

何か案は？

4

2 に答える 2

2

フィドル

これを試して：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#site-holder {
    width:100%;
    height:100%; 
    margin:0; 
    padding:0; 
    white-space: nowrap;
    font-size: 0;
}

.toronto-full, .montreal-full {
    width: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: top; /* this line added in edit */
    font-size: initial;
}
.toronto-full {
    background: green;
}
.montreal-full {
    background: red;
}

EDIT :
コードをもう一度確認してください。div の垂直方向の不一致の問題を修正する行を追加しました。

于 2013-10-17T15:16:25.917 に答える