Question

我有一个绝对定位的div。在这个div里面有一个图像，下面是一个标题。现在我希望标题在达到图像宽度的95％时突破到新的一行。

但我无法让它发挥作用。文本（无论我说什么宽度），总是将图像移动到左侧，就像它没有休息一样。

我为此做了一个小提琴： http://jsfiddle.net/hw7t7xyn/1/

图像设置为

right: 0;
top: 10px;

但由于文字太长，它会向左移动。

div.caption似乎也没有采用父div格式。

有人可以帮我吗？也许这是HTML设置或CSS的问题，我不知道了，但它让我发疯了。

更新抱歉，我忘了提及我不知道图片的尺寸。有没有可能的方法在没有javascript的情况下执行此操作？

Answer 1

我认为你只需要在主div（绝对定位的那个）上添加一个宽度。

我添加了260px的宽度（与图像相同）

当我这样做时，它将div与最右边对齐，因为right:0px这是正确的吗？

http://jsfiddle.net/hw7t7xyn/5/

Answer 2

div.photo-wrap {
    overflow: hidden;
    position: absolute;
    text-align: left;
    width:260px;
}

img.photo {
    position: relative;
    display: block;
}

div.caption {
    margin-top: 7px;
    width: 95%;
    position: relative;
    display: inline-bock;
}

为照片包装提供宽度

CSS：图像下方的文本不会破坏到新行

2 个答案: