css - 如何创建适合内容宽度的 block div？

Question

我有一个包含固定宽度内容(另一个 div 内的图像)和可变宽度内容(动态变化的文本)的 div。我需要这个外部 div 来:

• 从新的一行开始
• 与其内容一样宽
• 最好换行结束

因为它应该是行上的唯一元素，所以我不能使用display:inline 或display:inline-block。另一方面，display:block 不会自动收缩。这是我的代码:

http://jsfiddle.net/D9QV9/

我对 overflow、float 和 clear 的实验没有产生任何结果。非常欢迎任何帮助、建议、链接等。谢谢。

Answer 1

我是这样做的:我给了 #outer CSS 样式 display:inline-block 然后简单地将它放在另一个带有 css 的 div 中display:block 以确保 #outer 保持在单独的行上:

CSS

#outer {
    text-align: center;
    border-style: solid;
    border-width: 1px;
    border-color: #000000;
    height: 50px;
    width:auto;
    display:inline-block;
}

#image {
    float: right;
    width: 50px;
}

#element_block {
    display:block;
}

HTML

Some content above div

<div id="element_block">
    <div id="outer">
        Text inside div<div id="image">IMG</div>
    </div>
</div>

Some content below div

DEMO