Html 如何防止 DIV 扩展以占用所有可用宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/129651/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I keep a DIV from expanding to take up all available width?
提问by raldi
In the following HTML, I'd like the frame around the image to be snug -- not to stretch out and take up all the available width in the parent container. I know there are a couple of ways to do this (including horrible things like manually setting its width to a particular number of pixels), but what is the rightway?
在下面的 HTML 中，我希望图像周围的框架紧贴——不要伸展并占据父容器中的所有可用宽度。我知道有几种方法可以做到这一点（包括手动将其宽度设置为特定数量的像素等可怕的事情），但正确的方法是什么？
Edit:One answer suggests I turn off "display:block" -- but this causes the rendering to look malformed in every browser I've tested it in. Is there a way to get a nice-looking rendering with "display:block" off?
编辑：一个答案建议我关闭“display:block”——但这会导致渲染在我测试过的每个浏览器中看起来格式不正确。有没有办法用“display:block”获得漂亮的渲染离开？
Edit:If I add "float: left" to the pictureframe and "clear:both" to the P tag, it looks great. But I don't always want these frames floated to the left. Is there a more direct way to accomplish whatever "float" is doing?
编辑：如果我将“浮动：左”添加到相框并将“清除：两者”添加到 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>回答by Jim
The rightway is to use:
在正确的方法是使用：
.pictureframe {
display: inline-block;
}
Edit:Floating the element also produces the same effect, this is because floating elements use the same shrink-to-fitalgorithm for determining the width.
编辑：浮动元素也会产生相同的效果，这是因为浮动元素使用相同的收缩适应算法来确定宽度。
回答by neouser99
The beige rectangle is so wide because you have display: block on the span, turning an inline element into a block element. A block element is supposed to take up all available width, an inline element does not. Try removing the display: block from the css.
米色矩形如此宽，因为您在跨度上有 display: block ，将内联元素转换为块元素。块元素应该占据所有可用的宽度，而内联元素则不会。尝试从 css 中删除 display: 块。
回答by Atanas Korchev
Adding "float:left" to the span.pictureFrame selector fixes the problem as that's what "float:left" does :) Apart from everything else floating an element to the left will make it occupy only the space required by its contents. Any following block elements (the "p" for example) will float around the "floated" element. If you "clear" the float of the "p" it would follow the normal document flow thus going below span.pictureFrame. In fact you need "clear:left" as the element has been "float:left"-ed. For a more formal explanation you can check the CSS spec although it is beyond most people's comprehension.
将“float:left”添加到span.pictureFrame 选择器可以解决这个问题，因为这就是“float:left”所做的:) 除了将元素向左浮动的其他所有内容外，它只会占用其内容所需的空间。任何后面的块元素（例如“p”）将围绕“浮动”元素浮动。如果您“清除”“p”的浮点数，它将遵循正常的文档流，从而低于 span.pictureFrame。事实上，您需要“clear:left”，因为该元素已被“float:left”-ed。对于更正式的解释，您可以查看 CSS 规范，尽管它超出了大多数人的理解范围。
回答by stucampbell
Yes
display:inline-blockis your friend.
Also have a look at: display:-moz-inline-blockand display:-moz-inline-box.
是的，
display:inline-block是你的朋友。也看看：display:-moz-inline-block和display:-moz-inline-box。
回答by Keeth
The only way I've been able to do picture frames reliably across browsers is to set the width dynamically. Here is an example using jQuery:
我能够跨浏览器可靠地制作相框的唯一方法是动态设置宽度。下面是一个使用 jQuery 的例子：
$(window).load(function(){
$('img').wrap('<div class="pictureFrame"></div>');
$('div.pictureFrame').each(function(i) {
$(this).width($('*:first', this).width());
});
});
This will work even if you don't know the image dimensions ahead of time, because it waits for the images to load (note we're using $(window).load rather than the more common $(document).ready) before adding the picture frame. It's a bit ugly, but it works.
即使您事先不知道图像尺寸，这也会起作用，因为它会等待图像加载（注意我们之前使用的是 $(window).load 而不是更常见的 $(document).ready)添加相框。这有点难看，但它有效。
Here is the pictureFrame CSS for this example:
这是此示例的图片框架 CSS：
.pictureFrame {
background-color:#FFFFFF;
border:1px solid #CCCCCC;
line-height:0;
padding:5px;
}
I'd love to see a reliable, cross-browser, CSS-only solution to this problem. This solution is something I came up with for a past project after much frustration trying to get it working with only CSS and HTML.
我很想看到一个可靠的、跨浏览器的、仅限 CSS 的解决方案来解决这个问题。这个解决方案是我在过去的一个项目中想出来的，在尝试让它只使用 CSS 和 HTML 时遇到了很多挫折。
