div元素的垂直位置

Question

我有這個至今：！[在這裏輸入的形象描述] [1] [1]這裏

https://iamsteve.me/uploads/blog/inline-block-example.png

問題是，我不知道如何改變這個div元素的垂直位置。我被允許爲舊瀏覽器使用CSS1和CSS2。

HTML

<div id="graph"> 
    <div style="height: 100px;" class="row"></div> 
    <div style="height: 200px;" class="row"></div> 
    <div style="height: 100px;" class="row"></div> 
    <div style="height: 250px;" class="row"></div> 
    <div style="height: 300px;" class="row"></div> 

    <div id="legend"> 
     <div class="text">10</div> 
     <div class="text">20</div> 
     <div class="text">30</div> 
     <div class="text">40</div> 
     <div class="text">50</div> 
    </div> 
    </div> 

CSS

.text { 
    background-color: gray; 
    width: 18%; 
    float: left; 
    margin: 1%; 
    text-align: center; 
} 

.row { 
    background-color: gray; 
    width: 18%; 
    float: left; 
    margin: 1%; 
} 

Answer 1

我喜歡用：display: inline-block，而不是浮動的元素。

請注意，我在#graph中設置了font-size: 0以消除inline-block之間的間距，如所示here。

#graph{ 
 
    font-size: 0; 
 
} 
 
.text { 
 
    background-color: gray; 
 
    width: 18%; 
 
    float: left; 
 
    margin: 1%; 
 
    text-align: center; 
 
    font-size: 10px; 
 
} 
 

 
.row { 
 
    position: relative; 
 
    bottom: 0; 
 
    display: inline-block; 
 
    background-color: gray; 
 
    width: 18%; 
 
    margin: 1%; 
 

 
}

<div id="graph"> 
 
    <div style="height: 100px;" class="row"></div> 
 
    <div style="height: 200px;" class="row"></div> 
 
    <div style="height: 100px;" class="row"></div> 
 
    <div style="height: 250px;" class="row"></div> 
 
    <div style="height: 300px;" class="row"></div> 
 

 
    <div id="legend"> 
 
    <div class="text">10</div> 
 
    <div class="text">20</div> 
 
    <div class="text">30</div> 
 
    <div class="text">40</div> 
 
    <div class="text">50</div> 
 
    </div> 
 
</div>

在問候使用浮動specification狀態兩者float左和右：

左：該元件產生被向左浮動塊框。內容在框的右側流動，從頂部開始。

我不相信有一種方法可以覆蓋此（不幸）。

Further reading on float logic。