如何防止DIV扩展以占用所有可用宽度？

Question

在下面的HTML中,我希望图像周围的框架是舒适的 - 不要拉伸并占用父容器中的所有可用宽度.我知道有几种方法可以做到这一点(包括手动将其宽度设置为特定像素数等可怕的事情),但是正确的方法是什么？

编辑:一个答案表明我关闭了"display:block" - 但是这会导致渲染在我测试过的每个浏览器中都显得格格不入.有没有办法通过"display:block"获得漂亮的渲染效果关闭？

编辑:如果我将"float:left"添加到相框并将"clear:both"添加到P标签,它看起来很棒.但我并不总是希望这些框架浮动到左侧.是否有更直接的方式来完成"浮动"正在做的事情？

.pictureframe {
  display: block;
  margin: 5px;
  padding: 5px;
  border: solid brown 2px;
  background-color: #ffeecc;
}
#foo {
  border: solid blue 2px;
  float: left;
}
img {
  display: block;
}

<div id="foo">
  <span class="pictureframe">
       <img alt=''
        src="http://stackoverflow.com/favicon.ico" />
  </span>
  <p>
    Why is the beige rectangle so wide?
  </p>
</div>

Answer 1

在正确的方法是使用:

.pictureframe {
    display: inline-block;
}

编辑:浮动元素也会产生相同的效果,这是因为浮动元素使用相同的缩小到适合算法来确定宽度.