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

我喜欢使用：result而不是浮动元素。

请注意，我在display: inline-block中设置了font-size: 0，以消除#graph之间的间距here。

inline-block

#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>的{{3}}状态：

左：元素生成一个浮动到左侧的块框。内容流在框的右侧，从顶部开始。

我不相信有一种方法可以覆盖它（不幸的是）。

specification

div元素的垂直位置

1 个答案: