Question

我有两个并排的div，左边的div比右边的div高很多（见CodePen）：

<div class="drawer-top form-group form-group-lg clearfix">
  <div class="col-sm-12 no-pad">
    <button type="button" class="btn form-control input-lg btn-info btn-lg edit-columns">
      Edit Columns <i class="fa-pencil"></i>
      <span><i class="fa fa-times"></i></span>
    </button>
  </div>
</div>
<div class="drawer">
  <div class="refine-search">
    <div class="facet-container">
      <div class="col-sm-4">
        <label><input type="checkbox" checked/> Option 1</label>
        <label><input type="checkbox"/> Option 2</label>
        <label><input type="checkbox"/> Option 3</label>
        <label><input type="checkbox"/> Option 4</label>
        <label><input type="checkbox"/> Option 5</label>
        <label><input type="checkbox"/> Option 6</label>
        <label><input type="checkbox"/> Option 7</label>
        <label><input type="checkbox"/> Option 8</label>
        <label><input type="checkbox"/> Option 9</label>
        <label><input type="checkbox"/> Option 10</label>
        <label><input type="checkbox"/> Option 11</label>
        <label><input type="checkbox"/> Option 12</label>
        <label><input type="checkbox"/> Option 13</label>
        <label><input type="checkbox"/> Option 14</label>
        <label><input type="checkbox"/> Option 15</label>
        <label><input type="checkbox"/> Option 16</label>
        <label><input type="checkbox"/> Option 17</label>
        <label><input type="checkbox"/> Option 18</label>
      </div>
      <div class="col-sm-8">
        <button type="button" class="btn form-control input-lg btn-info btn-lg save-columns">+ Save Column View</button>
        <hr/>
        <em>My Column Views</em>
        <span style="float: right">edit</span>
        <hr/>
        <div class="refine-buttons form-group form-group-lg clearfix">
          <div class="col-sm-6 no-pad reset-button">
            <button type="button" class="btn form-control input-lg btn-lg btn-info columns-reset">
              Reset
            </button>
          </div>
          <div class="col-sm-6 no-pad apply-button">
            <button disabled type="submit" class="btn form-control input-lg btn-lg btn-primary">Apply</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我希望右侧的重置和应用按钮位于底部，不管左侧div可能是多长。我试图通过使用相对和绝对定位来实现这一点，但它不起作用。我做错了什么？

.refine-buttons {
  position: relative;
}

.reset-button {
  position: absolute;
  bottom: 0;
  left: 0;
}

.apply-button {
  position: absolute;
  bottom: 0;
  right: 0;
  }

Answer 1

这是一种方法，但你必须使用JavaScript / jQuery。

这是整个CSS：

label {
  display: block;
  padding-left: 15px;
  text-indent: -15px;
}

.refine-buttons {
  position: absolute;
  width:95%;
  bottom: 0px;
}

.col-sm-8 {
  position:relative;
  display:block;
}

这是jQuery：

$(document).ready(function(){
  var elemH = $(".col-sm-4").css("height");
  $(".col-sm-8").css("height",elemH);
});

您需要将col-sm-8元素的高度设置为其先前兄弟（col-sm-4）的高度，否则第一个元素的高度将小于第二个元素的高度，因为它包含的内容少得多。

这是一个更新的代码集：http://codepen.io/anon/pen/JoNgjR

希望我能帮忙

Answer 2

您的父容器必须清除内部浮动元素..

尝试类似：

.facet-container:after {
    content: '';
    display: table;
    clear: both;
}

清除浮动字符后，父元素与最高子元素一样高 - 绝对位置以这种方式工作！

位于div底部的按钮

2 个答案: