如何使用两个容器 div 将页面分成 4 个相等的部分？

Question

我正在设计一个需要分成 4 个相等的 DIV 的网页。如果我不需要将文本重叠到其中两个 DIV 上，这将很容易。因此，我决定最好的方法是将两个容器 DIV 堆叠在一起，每个 DIV 的宽度为 100%，高度为 50%。然后，我会将它们分成两个 DIV 类，每个类的高度为 100%，宽度为 50%，从而为每个容器 DIV 提供 2 个 DIV，数量为 2。

我当前的 CSS：

    #collectionsTop {
    width: 100%;
    height: 50%;
    overflow:hidden;
    margin: 0 auto;
    }
    .topRight {
    background-color:red;
    width:50%;
    height:100%;
    float:left;
    clear:both;
    display:inline-block;
    overflow:hidden;
    }
    .topLeft {
    background-color:blue;
    width:50%;
    height:100%;
    float:left;
    clear:both;
    display:inline-block;
    overflow:hidden;
    }
    #collectionsBottom {
    width: 100%;
    height: 50%;
    overflow:hidden;
    margin: 0 auto;
    }
    .bottomRight {
    background-color:yellow;
    width:50%;
    height:100%;
    float:left;
    clear:both;
    display:inline-block;
    overflow:hidden;
    }
    .bottomLeft {
    background-color:green;
    width:50%;
    height:100%;
    float:left;
    clear:both;
    display:inline-block;
    overflow:hidden;
    }

还有我的 HTML：

    <div id="collectionsTop">
        <div class="topRight"><img src="http://www.solomovies.ch/uploads/blog/lorem-ipsum-1440x900-text-on.jpg"></div>
        <div class="topLeft"><img src="http://www.solomovies.ch/uploads/blog/lorem-ipsum-1440x900-text-on.jpg"></div>
    </div>
    <div id="collectionsBottom">
        <div class="bottomRight"><img src="http://www.solomovies.ch/uploads/blog/lorem-ipsum-1440x900-text-on.jpg"></div>
        <div class="bottomLeft"><img src="http://www.solomovies.ch/uploads/blog/lorem-ipsum-1440x900-text-on.jpg"></div>
     </div>

显然，以上所有方法都不能以任何方式工作，以全分辨率显示图像，而不是浮动，并且不受其父 DIV 的限制。我不知道为什么。请帮忙。

Answer 1

您已将 - clear:both 放置在 topLeft 、 topRight 元素的 css 中

idea => clear:both; - 指定元素的左侧或右侧不允许浮动元素，

因此在你的情况下也发生了类似的事情，

检查这个小提琴：http://jsfiddle.net/4q4Jz/

更新： 现在检查小提琴.. demo

Answer 2

删除所有的`clear:both; 试试看。

`