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。