下面是另一个div图片和代码里面的div。因为会有文本和图像的父div。红色div将是父div的最后一个元素。
<div style="width: 200px;身高:150 px;边框:1px纯黑色;" > <div style="width: 100%;高度:50 px;边框:1px纯红色;" > < / div > < / div >
下面是另一个div图片和代码里面的div。因为会有文本和图像的父div。红色div将是父div的最后一个元素。
<div style="width: 200px;身高:150 px;边框:1px纯黑色;" > <div style="width: 100%;高度:50 px;边框:1px纯红色;" > < / div > < / div >
当前回答
这是一种方法
< span style=" font - family:宋体; 宽度:200 px; 身高:150 px; 边框:1px纯黑色;" > < span style=" font - family:宋体; 底部:0; 宽度:100%; 高度:50 px; 边框:1px纯红色;" > < / div > < / div >
但是因为内部div的位置是绝对的,你总是要担心外部div的其他内容会重叠它(而且你总是要设置固定的高度)。
如果可以的话,最好将内部div作为外部div的最后一个DOM对象,并将其设置为“clear: both”。
其他回答
如果你知道父母的身高,下面是避免绝对divs和table的方法:
<div class="parent">
<div class="child"> <a href="#">Home</a>
</div>
</div>
CSS:
.parent {
line-height:80px;
border: 1px solid black;
}
.child {
line-height:normal;
display: inline-block;
vertical-align:bottom;
border: 1px solid red;
}
JsFiddle:
例子
使外部div位置="相对"和内部div位置="绝对",并设置它的底部="0"。
灵活的方式。
.parent { 显示:flex; flex-direction:列; justify-content:之间的空间; } /*不需要,只是为了可视化*/ .parent { 身高:500 px; 边框:1px纯黑色; } .parent div { 边框:1px纯红色; } < div class = "父" > <div>图片,文本,按钮哦天哪!< / div > < div > < / div底部> < / div >
编辑:
来源- Flexbox指南
浏览器支持flexbox - Caniuse
<div style="width: 200px; height: 150px; border: 1px solid black;position:relative">
<div style="width: 100%; height: 50px; border: 1px solid red;position:absolute;bottom:0">
</div>
</div>
这是一种方法
< span style=" font - family:宋体; 宽度:200 px; 身高:150 px; 边框:1px纯黑色;" > < span style=" font - family:宋体; 底部:0; 宽度:100%; 高度:50 px; 边框:1px纯红色;" > < / div > < / div >
但是因为内部div的位置是绝对的,你总是要担心外部div的其他内容会重叠它(而且你总是要设置固定的高度)。
如果可以的话,最好将内部div作为外部div的最后一个DOM对象,并将其设置为“clear: both”。