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

【问题标题】：How do I keep a DIV from expanding to take up all available width?如何防止 DIV 扩展以占用所有可用宽度？
【发布时间】：2017-11-29 00:27:06
【问题描述】：

在下面的 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>

【问题讨论】：

标签： html css

【解决方案1】：

正确的方式是使用：

.pictureframe {
    display: inline-block;
}

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

【讨论】：

丑陋，但到目前为止，在实际可行的答案中，这对我来说是最不老套的。

【解决方案2】：

米色矩形很宽，因为你有 display: block 在跨度上，将内联元素变成块元素。块元素应该占据所有可用宽度，而内联元素则不会。尝试从 css 中删除 display: 块。

【讨论】：

如果我这样做，那么图像就不会位于框架内——您是否真的尝试过，它在您的浏览器中看起来不错？

【解决方案3】：

将“float:left”添加到 span.pictureFrame 选择器可以解决问题，因为“float:left”就是这样做的 :) 除了其他所有内容之外，将元素浮动到左侧将使其仅占用其内容所需的空间.任何随后的块元素（例如“p”）都将围绕“浮动”元素浮动。如果您“清除”“p”的浮动，它将遵循正常的文档流，从而低于 span.pictureFrame。实际上，您需要“clear:left”，因为该元素已被“float:left”-ed。要获得更正式的解释，您可以查看 CSS 规范，尽管它超出了大多数人的理解范围。

【讨论】：

【解决方案4】：

是的 display:inline-block 是你的朋友。也可以看看：display:-moz-inline-block 和 display:-moz-inline-box。

【讨论】：

【解决方案5】：

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

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

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

这是本示例的图片框架 CSS：

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

我很想看到一个可靠的、跨浏览器的、纯 CSS 的解决方案来解决这个问题。这个解决方案是我在过去的一个项目中想出的，在尝试让它只使用 CSS 和 HTML 时遇到了很多挫折。

【讨论】：