將div位置在父級的底部，但在浮動的同級旁邊

Question

給定以下標記，我想使按鈕位於圖像的右側和文本下方，但要固定在父級的底部 。 通常，將根據此答案來完成此操作 ，但是在這種情況下，由於存在浮動信息，因此內容最終會顯示在圖片頂部。 另外，絕對定位似乎將是一個問題，因為我最終可能最終也會重疊文本內容。 出於這個問題的目的，請假設圖像的寬度未知 ，所以據我所知，添加左頁邊距或填充並不是真正的選擇。

我想我可能必須對此進行重組，或者遠離浮動圖像，但我寧願不這樣做。 有沒有我忽略的簡單解決方案，可以在不大幅度更改布局的情況下完成這項工作？

 .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類中。

display CSS屬性指定用於元素的渲染框的類型。 在HTML中，默認顯示屬性值來自HTML規范中描述的行為或來自瀏覽器/用戶默認樣式表。 XML的默認值為內聯，包括SVG元素。

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

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分別將一個圖像浮動到左側，另一個將其余內容浮動到右側。 其余樣式將適用，您不必擔心按鈕位於圖像頂部