【问题标题】:css positioning questioncss定位问题
【发布时间】:2011-05-07 07:43:34
【问题描述】:

我一生都在努力弄清楚什么应该是一个极其简单的 CSS 任务:将一个文本块对齐到图像的右侧,并垂直定位该块,使其与图像的底部对齐;而且我宁愿不必为包含元素声明高度,因为这是一个冗长的图像列表,并且尺寸会有所不同(但都具有一定的最大宽度/高度)。我试图用“position:relative”定义一个父元素,其中包含两个左浮动的 div,一个带有图像,另一个带有文本块,定位为“absolute”和“bottom:0”,但我不能让文本块与图像底部对齐...

这里的任何帮助都可以很好地帮助我避免精神错乱;)

【问题讨论】:

  • 你只能使用 css 还是 javascript 可以?
  • 文字会在图片上方还是在图片右侧?
  • 一张您希望获得的图片会很有帮助。

标签: css positioning


【解决方案1】:

如果文本位于图像的右侧,只需在图像后使用带有 display:inline-block 的元素,并将所有内容包含在一个块中(如 div)。见here

【讨论】:

  • 哇 - 搞清楚他在说什么的道具! :)
  • 戴夫..我没有..只是一个疯狂的猜测;)
  • 您的示例中的 vertical-align 什么都不做。这是文本 内联块的标准位置。 vertical-align 仅适用于表格。见phrogz.net/css/vertical-align/index.html
  • @Rudie 不正确,垂直对齐也适用于内联块。看到这个fiddle,您可以将垂直对齐更改为中间或顶部,文本将相应移动
  • @nickpish 你必须设置 display:inline-block 。更新了我的代码jsfiddle.net/X4CeC
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多