Question

我需要一些建议，在图像下面创建一个与右侧对齐的标题。图像会改变，所以我不能使用固定值边距或类似的东西 - 这可能没有javascript吗？

这是基本布局，＆＃39; text-align：right＆＃39;如果我可以以某种方式强制包装器div约束图像宽度，但是目前它突破了这个。有什么建议吗？

<style>
#section{height: 74%; padding-left:5%;}
    #photowrapper{position:relative;}
        #photo{height:100%; width:auto;}
        #detailsdiv{position:relative; text-align:right;}
</style>

<div id='section'>
    <div id='photowrapper'>       
        <img id='photo' src=../imgs/banan.jpg></img>
        <div id= 'detailsdiv'>banan</div>
    </div>
</div>

也许是一个显而易见的问题，但我还没有被问过，我可以看到。

Answer 1

只需将display: inline-block;添加到#photowrapper CSS

即可

#photowrapper{
    position:relative;
    display:inline-block;
}

小提琴：http://jsfiddle.net/DyrS9/

Answer 2

您可以将display:table-cell（或table，inline-block）添加到#photowrapper：

#photowrapper{
    position:relative;
    display:table;
}

Example

右对齐图像下的文本（没有javascript）

2 个答案: