将div放在另一个div的底部

时间：2017-02-07 21:41:33

标签： html css

我正在尝试编写此设计： enter image description here

这就是我的代码：

.container-flex {
  display: flex;
  flex-flow: row;
  height: 100px;
}
.left {
  flex: 1;
  background-color: #2C77A5;
  padding-top: 2%;
  border-top-left-radius: 6px;
  height: 100px;
}
.main {
  display: flex;
  flex-direction: column;
}
.top {
  background: #27698D;
  border-bottom: 1px solid #2a2a2a;
  border-top-right-radius: 6px;
  width: 42px;
  height: 50px;
  padding-left: 14px;
  padding-top: 14px;
}
.middle {
  background: #27698D;
  border-bottom-right-radius: 6px;
  width: 42px;
  height: 50px;
  padding-left: 14px;
  padding-top: 16px;
}
.row-celeste {
  height: 22%;
  background-color: #8CE8FC;
}
<div class="container-flex">
  <div class="left">
    <div class="row">
      <div class="col-md-7 col-md-offset-1 border-right">
        <p class="card-text white-text">Mejorar clima en finanzas</p>
        <h4 class="card-subtitle white-text">Ponderación 33%</h4>
      </div>
      <div class="col-md-4 check-area">
        <p class="card-text white-text" id="clicker-calificacion"><i class="fa fa-check text-white" aria-hidden="true"></i> Calificar</p>
      </div>
    </div>
    <div class="row-celeste">
      <p class="card-text centered"></p>
    </div>
  </div>
  <section class="main">
    <a href="">
      <div id="clicker-menu-black" class="col top"><i class="fa fa-bars white-text" aria-hidden="true"></i>
      </div>
    </a>
    <a href="">
      <div id="clicker" class="col middle"><i class="fa fa-plus white-text" aria-hidden="true"></i>
      </div>
    </a>
  </section>
</div>

无论高度如何，如何使浅蓝色的行贴在“.left”的底部？我试过定位，但也许我真的不明白它。

3 个答案:

答案 0 :(得分：1)

您需要使用absolute定位，请参阅以下示例：

＆＃13;
＆＃13; 
.container-flex {
  display: flex;
  flex-flow: row;
  height: 100px;
}
.left {
  flex: 1;
  background-color: #2C77A5;
  padding-top: 2%;
  border-top-left-radius: 6px;
  height: 100px;
  position: relative; /* must be set to the container of the absolute positioned element */
}
.main {
  display: flex;
  flex-direction: column;
}
.top {
  background: #27698D;
  border-bottom: 1px solid #2a2a2a;
  border-top-right-radius: 6px;
  width: 42px;
  height: 50px;
  padding-left: 14px;
  padding-top: 14px;
}
.middle {
  background: #27698D;
  border-bottom-right-radius: 6px;
  width: 42px;
  height: 50px;
  padding-left: 14px;
  padding-top: 16px;
}
.row-celeste {
  height: 22px;
  background-color: #8CE8FC;
  position: absolute; /* this will make your div position calculated respecting its container */
  bottom: -19px; /* this will stick it to the bottom */
  width: 100%;
  z-index: -1;
}
＆＃13; 
<div class="container-flex">
  <div class="left">
    <div class="row">
      <div class="col-md-7 col-md-offset-1 border-right">
        <p class="card-text white-text">Mejorar clima en finanzas</p>
        <h4 class="card-subtitle white-text">Ponderación 33%</h4>
      </div>
      <div class="col-md-4 check-area">
        <p class="card-text white-text" id="clicker-calificacion"><i class="fa fa-check text-white" aria-hidden="true"></i> Calificar</p>
      </div>
    </div>
    <div class="row-celeste">
      <p class="card-text centered"></p>
    </div>
  </div>
  <section class="main">
    <a href="">
      <div id="clicker-menu-black" class="col top"><i class="fa fa-bars white-text" aria-hidden="true"></i>
      </div>
    </a>
    <a href="">
      <div id="clicker" class="col middle"><i class="fa fa-plus white-text" aria-hidden="true"></i>
      </div>
    </a>
  </section>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

浅蓝色的行不需要是div。它可以只是一个蓝色边框

#box {
  display: inline-flex;
  flex-direction: row;
  border-radius: 6px;
  overflow: hidden;
}
#left {
  background-color: #0073a9;
  border-bottom: 10px solid #6aebff; /* Light blue "bar" */
  display: flex;
  flex-direction: row;
}
#left > * {
  padding: 10px 20px;
}
#left > *:not(:first-child) {
  border-left: 1px solid black;
}
#right {
  background-color: #00688f;
  display: flex;
  flex-direction: column;
  font-size: 22px;
  font-weight: bold;
}
#right > * {
  flex-grow: 1;
  flex-basis: 0;
  padding: 5px 10px;
  text-align: center;
}
#right > *:not(:first-child) {
  border-top: 1px solid black;
}
.centered-container {
  display: flex;
  direction: row;
  justify-content: center;
  align-items: center;
}
#ellipsis {
  line-height: 30%;
}
* {
  color: white;
}
#left {
  font-family: sans, "Raleway";
}
<div id="box">
  <div id="left">
    <div id="title-div" class="centered-container">
      <div>
        <p><b>Mejorar políticas de liderazgo</b><br>Ponderación 40%</p>
      </div>
    </div>
    <div id="qualify-div" class="centered-container">
      &#10004; Calificar
    </div>
  </div>
  <div id="right">
    <div id="ellipsis"  class="centered-container">
      <div>·<br>·<br>·</div>
    </div>
    <div class="centered-container">
      <div>+</div>
    </div>
  </div>
</div>

答案 2 :(得分：0)

这样可以吗？

＆＃13;
＆＃13; 
<style>
.container-flex {
  display: flex;
  flex-flow: row;
  height: 100px;
}
.left {
  flex: 1;
  background-color: #2C77A5;
  padding-top: 2%;
  border-top-left-radius: 6px;
  height: 100px;
}
.main {
  display: flex;
  flex-direction: column;
}
.top {
  background: #27698D;
  border-bottom: 1px solid #2a2a2a;
  border-top-right-radius: 6px;
  width: 42px;
  height: 50px;
  padding-left: 14px;
  padding-top: 14px;
}
.middle {
  background: #27698D;
  border-bottom-right-radius: 6px;
  width: 42px;
  height: 50px;
  padding-left: 14px;
  padding-top: 16px;
}
.row-celeste {
  height: 22%;
  background-color: #8CE8FC;
}
  .row-celeste {
	height: 22%;
	background-color: #8CE8FC;
	bottom: 0;
	position: absolute;
	width: 100%;
}
</style>
<div class="container-flex">
 <div class="left">
    <div class="row">
      <div class="col-md-7 col-md-offset-1 border-right">
        <p class="card-text white-text">Mejorar clima en finanzas</p>
        <h4 class="card-subtitle white-text">Ponderación 33%</h4>
      </div>
      <div class="col-md-4 check-area">
        <p class="card-text white-text" id="clicker-calificacion"><i class="fa fa-check text-white" aria-hidden="true"></i> Calificar</p>
      </div>
    </div>
    <div class="row-celeste">
      <p class="card-text centered"></p>
    </div>
  </div>
  <section class="main">
    <a href="">
      <div id="clicker-menu-black" class="col top"><i class="fa fa-bars white-text" aria-hidden="true"></i>
      </div>
    </a>
    <a href="">
      <div id="clicker" class="col middle"><i class="fa fa-plus white-text" aria-hidden="true"></i>
      </div>
    </a>
  </section>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题