如何防止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;
}

編輯：浮動元素也會產生相同的效果，這是因為浮動元素使用相同的縮小到適合算法來確定寬度。

Answer 2

米色矩形是如此寬，因為你有顯示：跨度上的塊，將內聯元素轉換為塊元素。 塊元素應該占用所有可用寬度，而內聯元素則不占用。 嘗試從css中刪除display：block。

Answer 3

將“float：left”添加到span.pictureFrame選擇器可以解決問題，就像“float：left”所做的那樣:)除了其他一切之外，向左移動一個元素將使其僅占用其內容所需的空間。 任何后續的塊元素（例如“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而不是更常見的$（document）.ready）添加相框。 這有點難看，但它確實有效。

以下是此示例的pictureFrame CSS：

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

我很想看到這個問題的可靠，跨瀏覽器，僅CSS的解決方案。 這個解決方案是我為過去的項目提出的，經過多次挫折后試圖讓它只使用CSS和HTML。