html - CSS の div 内のブロック要素

Question

外部 div 内の別々の行に 2 つの div を表示しようとしています。現在display:inline-block、両方を設定していますが、これを変更して別々の行に表示する方法がわかりません。

これが私のコードの現在の外観です。John Doe と 100 をleaderdiv内の別の行に表示したいと思います。

http://jsfiddle.net/ZnuPR/

HTML

<ul>
    <li class="leader">
        <div class="ranking">1</div>
        <div class="name">John Doe</div>
        <div class="score">100</div>
    </li>
</ul>

CSS

.leader {
    border: 1px solid;
    background-color: #E6E6E6;
    display: inline-block;
    width: 400px;
    margin: 2px;
    padding: 2px;
    background-repeat: no-repeat;
    height: 75px;
}

.ranking {
    display: inline-block;
    margin:2px;
    padding:2px;
    width:50px;
    height:65px;
    background-color:green;
    color:white;
}

.name {
    display: inline-block;
}

.score {
    display: inline-block;
}

Answer 1

単純にフロート.rankingしてそのまま.nameにし.scoreて、そのままにすることができdisplay: blockます。

http://jsfiddle.net/ZnuPR/7/

.ranking {
    /* ... */
    float: left;
}

Answer 2

最速の解決策は、ランキングを「float:left;」に設定することです。名前とスコアを「display:block;」に。ブロック レベルの要素は、デフォルトで 100% にまたがります。これにより、2 つの要素が別々の行にあることが保証されます。

.leader {
    border: 1px solid;
    background-color: #E6E6E6;
    display: inline-block;
    width: 400px;
    margin: 2px;
    padding: 2px;
    background-repeat: no-repeat;
    height: 75px;
    }

.ranking {
    float:left;
    margin:2px;
    padding:2px;
    width:50px;
    height:65px;
    background-color:green;
    color:white;
}

.name {
    display: block;
}

.score {
    display: block;
}

http://jsfiddle.net/ZnuPR/2/

Answer 3

http://jsfiddle.net/ZnuPR/8/

.detailsラッパーといくつかのフロートを追加しました。

.ranking {
    float:left; /* Floating */
    margin:2px;
    padding:2px;
    width:50px;
    height:65px;
    background-color:green;
    color:white;
}
.details {
    float:left; /* floating */
}

.name {
    display: block; /* Changed to block */
}

.score {
    display: inline-block;
}

<ul>
    <li class="leader">
        <div class="ranking">1</div>
        <div class="details"> 
          <div class="name">John Doe</div>
          <div class="score">100</div>
        </div><!-- end details wrapper-->
    </li>
</ul>