Question

我正在尝试制作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; }

任何想法？

Answer 1

<强> FIDDLE

试试这个：

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的垂直不匹配问题。

Answer 2

为什么你甚至想为此使用浮动？

您可以使用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/

2个全屏Div，左侧浮动

2 个答案: