如何创建适合内容宽度的块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,然后简单地将它放在另一个div中,用css 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