底部自舉柱高度和位置圖像

<section>  
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-8"> 
      <div class="row"> 
       <h1>some heading</h1> 
       <p>bunch of text that pushes column down</p> 
       <h1>some heading</h1> 
       <p>bunch of text that pushes column down</p> 
       <h1>some heading</h1> 
       <p>bunch of text that pushes column down</p> 
       <h1>some heading</h1> 
       <p>bunch of text that pushes column down</p> 
      </div> 
      <div class="col-sm-4"> 
       <!-- this image should align at bottom of the row height --> 
       <img src="black_image.jpg"> 
      </div> 
     </row> 
    </div> 
</section> 
<footer> <!-- BG color is same as image above --> 
</footer>

這已被問過，但我還沒有找到一個體面的答案。我已經嘗試過在堆棧中發現的各種黑客應該使列等於行的高度（xs容器，邊距/填充等），然後應用一些定位到圖像div，但沒有一個似乎產生的結果我在尋找。底部自舉柱高度和位置圖像

我試圖完成的是讓圖像看起來好像它從上面一行中的頁腳出來，以便它直接位於col-sm-8中的內容的右側，但是在底部對齊。我錯過了什麼嗎？

來源

2014-10-07 Jamie Collingwood

只有使高度相等的列（都是最高的列）纔是表格或css'display：table'。但你似乎並不需要這裏。你只需要把這個img放入'row'，然後'position：absolute;底部：0;'。使用表格時，您需要在第二列上使用「vertical-align：bottom」。 – 2014-10-07 13:53:45

這不是標準的CSS（但），但有一個新的技術使用彈性盒。我一個人，期待着這個！ http://css-tricks.com/snippets/css/a-guide-to-flexbox/ – 2014-10-07 13:58:07

雅表不是一個選項。殺死響應。在手機上，圖像應該在內容下滑動，並且仍然顯示爲從頁腳出來。 – 2014-10-07 14:23:45

您可以嘗試col-md-offset-[value]類。

你也可以試試這個：

<footer> 

    <div class="row"> 
    <div class="col-md-4 col-md-offset-8 imagefooter"> 
     <!-- image --> 
    </div> 
    </div> 

</footer>

創建自定義style.css並定義imagefooter並給它一個負的頂部。

來源

2014-10-07 13:57:55

嗯......這個人有一定的承諾。讓我今晚試試看，回到你身邊。 – 2014-10-07 14:27:45

我希望它會起作用（yn） – 2014-10-07 14:32:00

底部自舉柱高度和位置圖像

回答

相關問題