水平和绝对垂直对齐div

时间:2012-09-29 00:44:16

标签: html css

我要做的是将div块相对于左边的(比如图像可能在那里)对齐,但总是在div的底部。我想只在CSS中做,但如果那不可能那么无论如何做到这一点都很好。

修改

如果没有那么多文本

,这应该是怎么看的
+---------------------+
|+---+Hello world!    |
||img|                |
|+---+[button]        |
+---------------------+

如果有很多文字

+---------------------+
|+---+Hello world!    |
||img|Hello world!    |
|+---+Hello world!    |
|Hello world!         |
|[button]             |
+---------------------+

我希望这能清除我正在寻找的东西。无论文本是否触摸,按钮都应始终位于页面底部。按钮也应尽可能远离左侧而不重叠任何内容。

1 个答案:

答案 0 :(得分:0)

您不能为元素指定两个不同的位置。 相反,您可以通过使用包装元素包装元素来解决此问题。 给包装器位置:相对。 给你想要垂直定位的元素:绝对;

http://jsfiddle.net/3hBds/

在下面的例子中,我解释'水平相对'是指水平堆叠元素,我通过浮动来完成。

修改: 要使文本包装图像,请浮动图像。 显示了两个例子。最后一个例子是如果你不清除浮动图像会发生什么。 用div包装文本和图像,以便始终按下按钮。

http://jsfiddle.net/apjX7/1/