html - 将 div 定位在父元素的底部，但紧挨着 float 的兄弟元素

Question

给定以下标记，我想让按钮位于图像右侧和文本下方，但卡在父级的底部。通常，这将根据 this answer 完成，但在这种情况下，由于有 float ，内容最终位于图像之上。此外，绝对定位似乎是个问题，因为我最终可能也会重叠文本内容。出于这个问题的目的，请假设图像的宽度未知，因此据我所知，添加左边距或填充并不是真正的选择。

我想我可能不得不重组它或放弃 float 图像，但我宁愿不这样做。是否有一个我忽略的简单解决方案可以在不彻底改变布局的情况下完成这项工作？

.wrapper {
  position: relative;
  overflow: auto;
}

.image {
  float: left;
  width: 30%;
}

.image img {
  max-width: 100%;
}

.stick-to-bottom {
  position: absolute;
  bottom: 0;
}

button {
  padding: 10px 25px;
  font-size: 16px;
}

<div class="wrapper">
  <div class="image">
    <img src="http://www.calgaryherald.com/cms/binary/10035261.jpg" />
  </div>
  <div class="stick-to-top">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  </div>
  <div class="stick-to-bottom">
    <div>Click buttons below, but only if you are cool.</div>
    <button>Button 1</button>
    <button>Button 2</button>
  </div>
</div>

Answer 1

添加display: inline;在 .stick-to-bottom 类中。

The display CSS property specifies the type of rendering box used for an element. In HTML, default display property values are taken from behaviors described in the HTML specifications or from the browser/user default stylesheet. The default value in XML is inline, including SVG elements.

.wrapper {
  border: solid 1px #f00;
  position: relative;
  overflow: auto;
}

.image {
  border: solid 1px #f00;
  float: left;
  width: 30%;
}

.image img {
  max-width: 100%;
}

.stick-to-bottom {
  border: solid 1px #f00;
  display: inline;
  position: absolute;
  bottom: 0;
}

button {
  padding: 10px 25px;
  font-size: 16px;
}

<div class="wrapper">
  <div class="image">
    <img src="http://www.calgaryherald.com/cms/binary/10035261.jpg" />
  </div>
  <div class="stick-to-top">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  </div>
  <div class="stick-to-bottom">
    <div>Click buttons below, but only if you are cool.</div>
    <button>Button 1</button>
    <button>Button 2</button>
  </div>
</div>

更好的选择是使用:display: inline-block; 和 margin: 20px 0 0 0;。

.stick-to-bottom {
  border: solid 1px #f00;
  display: inline-block;
  margin: 20px 0 0 0;
}

像这样:

.wrapper {
  border: solid 1px #f00;
  position: relative;
  overflow: auto;
}

.image {
  border: solid 1px #f00;
  float: left;
  width: 30%;
}

.image img {
  max-width: 100%;
}

.stick-to-bottom {
  border: solid 1px #f00;
  display: inline-block;
  margin: 20px 0 0 0;
}

button {
  padding: 10px 25px;
  font-size: 16px;
}

<div class="wrapper">
  <div class="image">
    <img src="http://www.calgaryherald.com/cms/binary/10035261.jpg" />
  </div>
  <div class="stick-to-top">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  </div>
  <div class="stick-to-bottom">
    <div>Click buttons below, but only if you are cool.</div>
    <button>Button 1</button>
    <button>Button 2</button>
    <br /> Some text...<br /> Some text...<br /> Some text...<br /> Some text...<br /> Some text...
  </div>
</div>