底部自举柱高度和位置图像

<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

底部自举柱高度和位置图像

回答

相关问题