Question

我正在设计一个需要分成4个相等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的css，topRight元素

中

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

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

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

<强>更新现在检查小提琴.. demo

Answer 2

删除所有`clear：both; 并尝试一下。

`

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

2 个答案: