打破css float的默认布局并清除

Break default layout of css float and clear

本文关键字：布局 清除 默认 css float 打破      更新时间：2023-09-26

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

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

现在我希望它们像下面这样，而不把它们放在另一个容器中，如何使其工作？

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

尝试此方法，u将hav设置为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>

试着像这样订购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/

我只是想得到你想要的结果。这可能不是最好的方法，因为我为块指定了高度。你可以在这里玩。

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;}
相关文章：