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

【问题标题】：Right-aligning text under images (without javascript)右对齐图像下的文本（没有 javascript）
【发布时间】：2015-01-03 23:54:39
【问题描述】：

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

这是基本布局，如果我能以某种方式强制包装器 div 限制图像宽度，'text-align: right' 会起作用，但目前它打破了这一点。有什么建议吗？

<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>

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

【问题讨论】：

你能做一个小提琴吗？并且不要将 id 用于 css。
@BordiMan 你能解释一下为什么不应该在 CSS 中使用 ids 吗？
Id 很好，只是不要在每个 id 的每个页面上多次使用它们，否则会收到浏览器忽略的警告。 =/
id 在 css 中，这是 css 写作中的基本规则和糟糕的语气
@BordiMan 你有资源吗？为什么不好？

标签： html css alignment

【解决方案1】：

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

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

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

【讨论】：

还要给 detailsDiv 的 css 属性 word-wrap:break-word;以防止字宽比图像溢出。
非常感谢，出于兴趣，为什么它会起作用？只是为了澄清一下，我接受了这个方法，因为根据我的经验，table-cell 的行为很奇怪，所以我选择了这种方法。
@dnv 之所以有效，是因为块级元素，即您的 div 开始时，会自动占据整个宽度。这就是为什么你的文字太正确了。行内块级元素仅与其内容一样宽，这意味着div 的边框将与图像的边框相同。

【解决方案2】：

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

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

Example

【讨论】：

表格化所有的东西！