Question

嘿，有一种方法可以在不使用position:absolute的情况下将div标签的内容与底部对齐。互联网上几乎所有其他解决方案都使用position:absolute和/或vertical-align:bottom，但有没有办法在不使用position:absolute的情况下执行此操作，让我们举例说明如何对齐图片中的猫在这个fiddle感谢的div的底部！

我想到的另一个解决方案是填满顶部的空白区域，以便将图像向下推到底部，但我也不知道如何做到这一点。

P.S。如果可能的话，请不要建议使用div中的表格。

Answer 1

您可以使用flexbox解决此问题：http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/

Answer 2

您可以尝试类似

的内容

<div style="border:1px solid black; height:100px; display:table; width:100%;">

    <div style="display:table-cell; vertical-align: bottom;">
        <img src="http://placekitten.com/100/100" style="height:90px;position:relative;display:block;" />
    </div>  
</div>

Answer 3

<强> Demo

HTML

<div class="content">Content</div>
<div class="footerLike">
    <img src="http://placekitten.com/100/100" style="height:90px;position:relative;display:inline-block;" />
</div>

CSS

.content {
    height:calc(100% - 102px); /* 100% - height of footer - borders */
}
.footerLike {
    border:1px solid black;
    height:100px;
}
body, html {
    height: 100%;
    width: 100%;
    margin:0;
    padding:0;
}

Demo ，如评论中所述

<div class="footerLike">
    <div class="dummy"><!-- you can put anything here --></div>
    <img src="http://placekitten.com/100/100" style="height:90px;position:relative;display:inline-block;" />
</div>


.footerLike {
    border:1px solid black;
    height:100%;
}
img {
    height: 100%;
    display: block;
}
.dummy {
    height: calc(100% - 100px);
}
body, html {
    height: 100%;
    width: 100%;
    margin:0;
    padding:0;
}

将内容对齐div的底部而不使用position：absolute

3 个答案: