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

编辑：浮动元素也会产生相同的效果，这是因为浮动元素使用相同的shrink-to-fit算法来确定宽度。

Answer 2

米色矩形是如此宽，因为你有跨度上的显示：块，将内联元素转换为块元素。块元素应该占用所有可用宽度，而内联元素则不占用。尝试从css中删除display：block。

Answer 3

将“float：left”添加到span.pictureFrame选择器可以解决问题，因为“浮动：左”做的是:)除了其他所有内容之外，向左移动元素将使其仅占用其内容所需的空间。任何后续的块元素（例如“p”）将浮动在“浮动”元素周围。如果你“清除”“p”的浮动，它将遵循正常的文档流程，因此在span.pictureFrame下面。实际上你需要“clear：left”，因为元素是“float：left”-ed。有关更正式的解释，您可以检查CSS规范，尽管它超出了大多数人的理解。

Answer 4

是 display:inline-block是你的朋友。另请查看：display:-moz-inline-block和display:-moz-inline-box。

Answer 5

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

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

即使您不提前知道图像尺寸，这也会起作用，因为它等待图像加载（注意我们使用$（window）.load而不是更常见的$（文档）。准备好）在添加相框之前。它有点难看，但它有效。

以下是此示例的pictureFrame CSS：

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

我很想看到这个问题的可靠，跨浏览器，仅CSS的解决方案。这个解决方案是我为一个过去的项目提出的，经过很多挫折后试图让它只使用CSS和HTML。

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

5 个答案: