Question

我正在尝试为我们在工作中创建的一些旋转聚光灯创建一个模板，而我正在尝试做的应该是相当简单的。

这是我的小提琴：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>

如果我向右浮动，它会与顶部对齐。如果我移除浮子，它会与底部对齐，但我无法将其对齐到右边。

提前致谢！

Answer 1

Flexbox可以做到这一点。

<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>

{{1}}

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

1 个答案: