在下面的HTML中，我希望图像周围的框架紧贴-不能伸展并占用父容器中的所有可用宽度。我知道有两种方法可以做到这一点(包括一些可怕的事情，例如手动将其宽度设置为特定的像素数)，但是正确的方法是什么？

编辑：一个答案表明我关闭了" display：block"-但这会导致渲染在我测试过的每个浏览器中看起来都是畸形的。有没有办法通过关闭" display：block"来获得美观的渲染？

编辑：如果我在画框上添加" float：left"，在P标签上添加" clear：both"，则看起来很棒。但是我并不总是希望这些框架向左浮动。是否有更直接的方法来完成"浮动"操作？

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

解决方案

米色矩形之所以如此宽，是因为我们有display：跨度上的块，将嵌入式元素变成块元素。块元素应该占据所有可用宽度，而内联元素则不会。尝试从CSS移除display：块。

正确的方法是使用：

.pictureframe {
    display: inline-block;
}

编辑：浮动元素也产生相同的效果，这是因为浮动元素使用相同的"缩小以适合"算法来确定宽度。

我能够跨浏览器可靠地制作相框的唯一方法是动态设置宽度。这是使用jQuery的示例：

$(window).load(function(){
  $('img').wrap('<div class="pictureFrame"></div>');
  $('div.pictureFrame').each(function(i) {
    $(this).width($('*:first', this).width());
  });
});

即使我们不提前知道图像的尺寸也可以使用，因为它在等待图像加载之前(请注意，我们正在使用$(window).load而不是更常见的$(document).ready)添加相框。有点丑陋，但是可以用。

这是此示例的pictureFrame CSS：

.pictureFrame {
  background-color:#FFFFFF;
  border:1px solid #CCCCCC;
  line-height:0;
  padding:5px;
}

我很乐意看到一个可靠的，跨浏览器的，仅CSS的解决方案。经过很多挫折之后，我试图为过去的项目提供此解决方案，以使其只能与CSS和HTML一起使用。

是的
display：inline-block是朋友。
还可以看一下：" display：-moz-inline-block"和" display：-moz-inline-box"。

在span.pictureFrame选择器中添加" float：left"可解决此问题，因为这是" float：left"的作用：)除了将元素向左浮动以外，它只会占用其内容所需的空间。以下任何块元素(例如" p")都将在" floated"元素周围浮动。如果我们"清除"" p"的浮点数，它将遵循正常的文档流，因此会低于span.pictureFrame。实际上，我们需要" clear：left"，因为该元素已被" float：left"编辑。
对于更正式的解释，我们可以查看CSS规范，尽管它超出了大多数人的理解。