打破css浮动和清除的默认布局。

Question

我有四个这样大小的div，它们在一个主容器中，有一定的宽度。如果我只为每个div设置浮动左，他们将显示这样的。

##########################################################
#                          ##             ##             #
#                          ##             ##             #
#            5             ##      6      ##      7      #
#                          ##             ##             #
#                          ##             ##             #
##########################################################
############################
#                          #
#                          #
#                          #
#                          #
#            8             #
#                          #
#                          #
#                          #
#                          #
#                          #
############################

现在我想让它们像下面这样，而不把它们放在另一个容器里，如何使它工作？

#########################################################
#                           ##                          #
#                           ##                          #
#            5              ##                          #
#                           ##                          #
#                           ##            8             #
##############################                          #
##############################                          #
#             ##            ##                          #
#             ##            ##                          #
#      6      ##      7     ##                          #  
#             ##            ##                          #  
#             ##            ##                          #
#########################################################

Answer 1

试试这个方法，你必须给divs的总和加上float left。

    <div id="main">
<!-- Wrapper for divs 5, 6 & 7 -->
     <div id="567">
      <div id="5"></div>
<!-- Wrapper for divs 6 & 7 -->
      <div id="67">
       <div id="6"></div>
       <div id="7"></div>
      </div>
     </div>
     <div id="8"></div>
    </div>

Answer 2

试着像这样排列divs的顺序并使用浮点数。

<div class="main">
    <div class="div div-8">Content #8</div>
    <div class="div div-5">Content #5</div>
    <div class="div div-7">Content #7</div>
    <div class="div div-6">Content #6</div>
</div>

CSS

.main div {float: right;}

http:/jsfiddle.netv6RR52

Answer 3

我只是想得到你想要的结果。这可能不是最好的方法，因为我给块分配了一个高度。你可以玩一下 这里.

HTML:

<div class="container">
    <div class="five">5</div>
    <div class="eight">8</div>
    <div class="six">6</div>
    <div class="seven">7</div>
</div>

CSS:

.container{
    display: block;
    width: 100%;
    height: 350px;
    overflow: hidden;
}
.five{
    float: left;
    width: 50%;
    height: 200px;
    line-height: 200px;
    background: #666;    
    text-align: center;
    font-size: 60px;    
}
.eight{
    float:right;
    width: 50%;
    height: 350px;
    line-height: 350px;
    background: #333;
    color: #fff;
    text-align: center;
    font-size: 60px;  
}
.six, .seven{
    float: left;
    width: 25%;
    height: 150px;
    line-height: 150px;
    text-align: center;
    font-size: 60px; 
}
.six{background: #ccc;}
.seven{background: #999;}