Question

鉴于以下标记，我想将图像右侧的按钮放在文本下方，但会粘贴到父级的底部。通常，这将按this answer完成，但在这种情况下，由于存在浮动，因此内容最终位于图像的顶部。此外，绝对定位似乎是一个问题，因为我最终可能最终重叠文本内容。出于这个问题的目的，请假设图像的宽度未知，因此，就我所见，添加左边距或填充并不是一个真正的选项。

我想我可能不得不对此进行重组或远离浮动图像，但我宁愿不这样做。是否有一个我忽略的简单解决方案可以使这项工作无需彻底改变布局？

.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

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

display CSS属性指定用于的呈现框的类型一个元素。在HTML中，默认显示属性值取自 HTML规范中描述的行为或来自浏览器/用户默认样式表。 XML中的默认值是内联的，包括SVG元素。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

更好的选择可能是：display: inline-block;和margin: 20px 0 0 0;。

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

这样的事情：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

下面的代码片段将有助于您想要的内容，但我不建议使用该结构。

<style>
.wrapper {
  position: relative;
  overflow: auto;
}

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

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

.stick-to-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  right:0;
  text-align: right;
}

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

</style>

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

相反，我推荐有两个div，一个是将图像浮动到左边，另一个是将剩下的内容浮动到右边。其余的样式将适用，你不必担心按钮会在图像的顶部显示

将div定位在父级的底部，但旁边是浮动的兄弟

2 个答案: