javascript - css float と clear のデフォルト レイアウトを壊す

Question

これらのサイズのような 4 つの div があり、それらは特定の幅のメイン コンテナーにあります。各 div に float left のみを設定すると、次のように表示されます。

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

今、私はそれらを別のコンテナに入れずに次のようにしたいのですが、どのように機能させるのですか?

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

Answer 1

このように div を並べ替えて、float で遊んでみてください。

<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/

Answer 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;}