html - 让div向右浮动并对齐变量div的底部

Question

我正在尝试为我们在这里创建的一些旋转聚光灯创建一个模板，我正在尝试做的事情应该相当简单。

这是我的 fiddle :http://jsfiddle.net/aeromax/2t4k4cf9/

我想做的是让#spotlightCTA 向右浮动(很容易做到)并与#spotlightTitle 的底部对齐，这样号召性用语就会根据标题的高度向上或向下移动.

这是与这两个 div 关联的样式:

#spotlightTitle {
    width: auto;
    height: auto;
    display: inline-block;
    bottom: 0px;
}

#spotlightCTA {
    position: relative;
    display: inline-block;
    width: 300px;
    text-align: right;
    cursor: pointer;
    right: 0px;
    float: right;
}

还有我的 HTML

<div id="spotlightContent">
    <div id="spotlightTitle">
        <div class="title">This is a test title.<br>Let's make it longer.
        </div>
    </div>

    <div id="spotlightCTA" class="animate">
        <span>This is a call to action.</span>
        <button type="">Test button</button>
    </div>

</div>

如果我向右浮动，它会与顶部对齐。如果我移除 float ，它会与底部对齐，但我无法使其与右侧对齐。

提前致谢!

Answer 1

Flexbox 可以做到这一点。

div {
  background-color: rgba(10, 10, 10, .2);
}
/*Containers*/

#spotlightContainer {
  position: relative;
  height: 200px;
  width: 646px;
  padding: 10px 20px 0px 20px;
  background-color: rgba(0, 0, 0, .4);
}
#spotlightContent {
  width: 646px;
  height: auto;
  padding: 30px 0px 0px 0px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
#spotlightTitle {
  width: auto;
  height: auto;
  display: inline-block;
  bottom: 0px;
}
/*CTA*/

#spotlightCTA {
  position: relative;
  display: inline-block;
  width: 300px;
  text-align: right;
  cursor: pointer;
  right: 0px;
  float: right;
}
#spotlightCTA span {
  font-family: "Open Sans", "Helvetica Neue", helvetica, arial, sans-serif;
  font-weight: 300;
  color: #fff;
  display: inline-block;
  padding: 5px 0px 0px 0px;
}
#spotlightCTA button {
  background-color: #ffd200;
  border-radius: 0px;
  border: none;
  margin: 0px 0px 0px 15px;
  padding: 5px;
  vertical-align: text-bottom;
}
.title {
  font-family: "Oswald", "Helvetica Neue", helvetica, arial, sans-serif;
  color: #fff;
  font-weight: 600;
  max-width: 400px;
  font-size: 32px;
  line-height: 1.2;
  display: inline-block;
}

<div id="spotlightContainer">

  <div id="spotlightContent">
    <div id="spotlightTitle">
      <div class="title">This is a test title.
        <br>Let's make it longer.
      </div>
    </div>

    <div id="spotlightCTA" class="animate">
      <span>This is a call to action.</span>
      <button type="">Test button</button>
    </div>

  </div>

</div>