0

I have four divs like these sizes, and they are in a main container with certain width. If I only set float left for each div, they will be showed like this:

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

now i want them to be like following, without putting them in another container, how to make it works?

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

3 回答 3

1

试试这个方法，你将不得不给左浮动作为 div 的总和。

    <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>
于 2013-06-28T05:47:46.083 回答
0

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

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;}
于 2013-06-28T06:45:11.030 回答
0

尝试像这样订购 div 并使用浮点数：

<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.net/v6RR5/2/

于 2013-06-28T06:14:46.713 回答