将一个 div 放置在另一个 div 的底部附近

我有外部 div 和内部 div。我需要把内部 div 放在外部 div 的底部。

外部 div 是弹性的(例如宽度: 70%)。我还需要居中的内部块。

下面的图片显示了所描述的简单化妆模型:

enter image description here

98690 次浏览
小开
最佳答案

Tested and working on Firefox 3, Chrome 1, and IE 6, 7 and 8:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><body>
<div style='background-color: yellow; width: 70%;
height: 100px; position: relative;'>
Outer
<div style='background-color: green;
position: absolute; left: 0; width: 100%; bottom: 0;'>
<div style='background-color: magenta; width: 100px;
height: 30px; margin: 0 auto; text-align: center'>
Inner
</div>
</div>
</div>
</body>
</html>

Live version here: http://jsfiddle.net/RichieHindle/CresX/

小开

You need a wrapping div for the bottom one, in order to center it.

<style>
/* making it look like your nice illustration */
#outer { width: 300px; height: 200px; background: #f2f2cc; border: 1px solid #c0c0c0; }
#inner { width: 50px; height: 40px; background: #ff0080; border: 1px solid #800000; }


/* positioning the boxes correctly */
#outer { position: relative; }
#wrapper { position: absolute; bottom: 3px; width: 100%; }
#inner { margin: 0 auto; }
</style>




<div id="outer">
<div id="wrapper"><div id="inner"></div></div>
</div>
小开

Works well on all browsers including ie6.

<style>
#outer{
width: 70%;
background-color: #F2F2CC;
border: 1px solid #C0C0C0;
height: 500px;
position: relative;
text-align: center;
}


#inner{
background-color: #FF0080;
border: 1px solid black;
width: 30px;
height: 20px;


/* Position at the bottom */
position: relative;
top: 95%;


/* Center */
margin: 0 auto;
text-align: left;
}
</style>


<div id="outer">
<div id="inner">
</div>
</div>
小开

CSS3 Flexbox allows the bottom positioning very easily. Check the Flexbox support table

HTML

<div class="outer">
<div class="inner">
</div>
</div>

CSS

.outer {
display: flex;
justify-content: center; /* Center content inside */
}
.inner {
align-self: flex-end; /* At the bottom of the parent */
}

Output:

.outer {
background: #F2F2CD;
display: flex;
width: 70%;
height: 200px;
border: 2px solid #C2C2C3;
justify-content: center;
}
.inner {
background: #FF0081;
width: 75px;
height: 50px;
border: 2px solid #810000;
align-self: flex-end;
}
<div class="outer">
<div class="inner">
</div>
</div>


提交答案