html - 在右侧放置许多不同的 div 元素，每个元素的高度和宽度均为 100%(全屏)

Question

我遇到了一个问题，需要一些建议。 我想要几个主要的 div 容器让我们说

<div class="main">

一个到另一个在右边。

1. 所有主容器都应具有完整的宽度和高度(全屏)。
2. 在右侧，我需要其他几个大小和宽度与前者相同的主容器。

是否可以在不使用 javascript 读取和设置的情况下将 div 彼此设置到右侧？有 css/html 解决方案吗？

例子:

<div class="main"><!--to the right one more --> 
</div>

<div class="main"><!--to the right one more -->
</div>

<div class="main">
</div>

风格:#This doesn't work...

.main{
width:100%;
height:auto;
float: right;

}

Answer 1

我可能误解了这个问题，但是试试

html, body {
   height: 100%;   
}

body {
    width: 300%;
}

.main {
   height: 100%;
   width: 33.333333333%;
   float: left;    
}

http://jsfiddle.net/3yaJZ/