Question

我创建小的双线条，我有一些问题，我改变高度height: 5rem;，高度总是从上到下改变，如何正确使用？我想知道如何正确地增加它 - 从下到上，（我无法正确解释这个问题，我对此问题没有任何想法，请查看我的代码，你可以理解它）

看一下示例图片（我需要这样）

＆＃13;

.book-event-one {
    position:absolute; /*Parent MUST be relative*/
    z-index: 9;

    /*Set width/height of the div in 'parent'*/
    display: block;
    background-color: #009193;
    width: 0.5rem;margin-left: 0.2rem;
    height: 2rem;
  }
  
  
  .book-event-two {
    position:absolute; /*Parent MUST be relative*/
    z-index: 9;
    margin-left: 0.8rem;
    /*Set width/height of the div in 'parent'*/
    display: block;
    background-color: #ff9300;
    width: 0.5rem;
    height: 5rem;
  }

＆＃13;

 



<div class="book-event-one"></div><div class="book-event-two"></div>

＆＃13;

Answer 1

您可以将两个条形图包裹在主div上。将下一个css添加到该div

.main {
  position: relative;
  height: 5rem;
}

完成后，只需在两个栏中添加底部：0。

希望它能解决你的问题。

.book-event-one {
  position: absolute;
  /*Parent MUST be relative*/
  z-index: 9;
  /*Set width/height of the div in 'parent'*/
  display: block;
  background-color: #009193;
  width: 0.5rem;
  margin-left: 0.2rem;
  height: 2rem;
  bottom: 0;
}

.book-event-two {
  position: absolute;
  /*Parent MUST be relative*/
  z-index: 9;
  margin-left: 0.8rem;
  /*Set width/height of the div in 'parent'*/
  display: block;
  background-color: #ff9300;
  width: 0.5rem;
  height: 5rem;
  bottom: 0;
}

.main {
  position: relative;
  height: 5rem;
}

<div class="main">
  <div class="book-event-one"></div>
  <div class="book-event-two"></div>
</div>

Answer 2

您需要在使用绝对属性时指定位置。

.book-event-one, .book-event-two {
 bottom: 0;
}

Answer 3

由于两者都为position: absolute，除非您指定bottom value.

，否则它们将始终保持最高（默认行为）

用常规div包裹div并给它position: relative然后为这两个孩子添加bottom: 0

＆＃13;

.book-event-one {
    position:absolute; /*Parent MUST be relative*/
    z-index: 9;

    /*Set width/height of the div in 'parent'*/
    display: block;
    background-color: #009193;
    width: 0.5rem;margin-left: 0.2rem;
    height: 2rem;
  }
  
  
  .book-event-two {
    position:absolute; /*Parent MUST be relative*/
    z-index: 9;
    margin-left: 0.8rem;
    /*Set width/height of the div in 'parent'*/
    display: block;
    background-color: #ff9300;
    width: 0.5rem;
    height: 5rem;
  }
  .book-event-one,
  .book-event-two {
    bottom: 0;
  }

＆＃13;

<div style="position: relative;height: 5rem"><div class="book-event-one"></div><div class="book-event-two"></div></div>

＆＃13;

Answer 4

检查JSfiddle链接，希望您能得到所需的结果。

＆＃13;

#outer-div{
  border:1px solid green;
  width: 200px;
  height: 200px;
  position:relative;
}
.book-event-one {
    position:absolute; /*Parent MUST be relative*/
    z-index: 9;

    /*Set width/height of the div in 'parent'*/
    display: block;
    background-color: #009193;
    width: 0.5rem;margin-left: 0.2rem;
    height: 2rem;
    bottom:0;
    /* border:1px solid green */
  }
  
  
  .book-event-two {
    position:absolute; /*Parent MUST be relative*/
    z-index: 9;
    margin-left: 0.8rem;
    /*Set width/height of the div in 'parent'*/
    display: block;
    background-color: #ff9300;
    width: 0.5rem;
    height: 5rem;
    bottom:0;
  }

＆＃13;

<div id="outer-div">
  <div class="book-event-one"></div><div class="book-event-two"></div>
</div>

＆＃13;

注意：-just注释外部div的边框css，我只是为了参考

div标签线条高度问题

4 个答案: