Question

我的css是这样的：

.stage{
    width:960px;
    background-image:url('stage.png');
    background-position:bottom;
    background-repeat:repeat-x;
    min-height:400px;
    float:left;
    text-align:center;
}

这会放置div底部的背景图像，内容居中。但我无法弄清楚如何将内容放在div的底部。

宽度是固定的，如果内容高于div，则高度应该展开，但如果内容较短，则应将其放在底部。

我已经看到了一些至少有3个不同div的例子来完成这个，但是有没有办法在css中只有一个div这样做？我不想放置div在另一个div的底部，div内的所有内容都应该与底部对齐。

我希望它可以像text-align:bottom;

一样简单

Answer 1

如果你不介意使用绝对/相对定位

.myContainer {
   position:relative; /* Needed so the inner divs position themselves relative to the container*/
}

.myInnerDiv {
    position:absolute;
    bottom:0px;
    text-align:center; /* To get the text to the center */
}

然后你的HTML可以

<div class="myContainer">
    <div class="myInnerDiv">Content goes here</div>
</div>

Answer 2

你可以用这样的1 div来做 - 你的容器div应该是

position: relative;

然后使用

设置段落（或内部div）的样式

position: absolute;
bottom: 0px;

Answer 3

实现这一目标的一种方法是将内容放在另一个div中，并将其放在。stage div中。

.stage{position:relative;}

.stage .content{
 position:absolute;
 bottom:0;
 text-align:center;
}

Answer 4

vertical-align：bottom就是答案。

Answer 5

编辑2：你可以这样做。

<div style="border: 1px solid yellow; width: 70%; height: 100%; position: relative; overflow:hidden">
    Outer
    <a style="border: 1px solid green; width: 100%; position: relative; float: left; margin-top: 5%;" href="#">      
        Comments are disabled for this post


    </a>
</div>

您可以使用<a>

更改任何标记

点击此处观看现场演示：http://jsbin.com/ajofu

Answer 6

这有点像hackish，但它似乎适用于Firefox，IE和Chrome（我没有其他浏览器来测试它）

CSS

.myContainer {
 width:960px;
 background: #555 url('stage.png') bottom repeat-x;
 min-height:400px;
 float:left;
 text-align:center;
}

.myContainer img.spacer {
 height: 400px;
 width: 0;
 vertical-align: bottom;
 border: transparent 0px;
 text-align: left;
}

HTML

<div class="myContainer">
 <img alt="" class="spacer" /><br>
 blah blah blah blah blah blah blah blah blah blah blah blah
</div>

有没有办法只使用一个div将内容放在div的底部？

6 个答案: