1

我正在尝试制作一个 UL 或 DIV，其中每个列表项/子 div 都是全屏的（100% 宽度 100% 高度）并向左浮动，所以我可以水平滚动它们，知道我该怎么做吗？这是我的代码，但它没有像我想象的那样工作

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

编辑：
再次查看代码。我添加了一条线来解决 div 垂直不匹配的问题。

于 2013-10-17T15:16:25.917 回答
1

你为什么还要为此使用浮点数？

你可以使用inline-block显示；

.toronto-full {
    background-color:green;
    width:50%;
    height:100%;
    display: inline-block;
}
.montreal-full {
    background-color:red;
    width:50%;
    height:100%;
    display: inline-block;
}

示例：http: //jsfiddle.net/7DxFE/

于 2013-10-17T15:15:23.087 回答