logo标签列表

如何使一个div的宽度和高度与其内容相同？

htmlcss
9
假设我在一个
元素中有一个元素，如何使用CSS使
的宽度和高度与其内容相同？
5个回答
16
浮动 div 会使其收缩以至于 div 只有足够放置内容的空间。
您可能需要在随后的元素上使用 clear。
另一种方法是使用 inline-block。
@Marko - 嗯？我有什么忘了吗？ - meder omuraliev
+1 看错了问题，以为他试图让子元素填充父元素。我会删除那条评论，很快就会删除这条 :) 哈哈 - Marko
inline-block在大多数浏览器中都能正常工作吗？我从来没有真正使用过它，因为我对它不确定。 - WalterJ89
1
IE在本地内联元素上支持inline-block，但你需要在IE上声明display:inline;以适用于本地块级元素。 - meder omuraliev
5

inline-block 是正确的。

<div style="border:1px solid red;display:inline-block">
    <img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" alt="" style="border:1px solid green" />
</div>
1
我曾认为inline-block的浏览器支持有限（即我认为它几乎只限于IE），但我刚在Safari（webkit）和Firefox上测试了你的示例，它完美地工作了。我已经这样做了多年 - 每天都学到新东西。谢谢Sammy！ - Lee
@Lee 你说得对。我刚在IE6、7和8中测试了一下，发现宽度并没有被限制在图像的大小内。嗯，反正我自己也从来没觉得有必要用这个。 - Sammy
4

默认情况下，div的高度将相同 -- 除非您对其进行限制或添加填充或边距。但默认宽度将填充可用空间。如果要将宽度折叠以“收缩包裹”内容，则必须将其浮动或使其绝对定位。

这种方法的问题（根据您的需求）在于这两个方法都会有效地将其从正常布局中删除。如果您仍需要它成为正常布局的一部分，则必须执行以下操作（包括边框以便您知道正在发生的情况）：

<html>
<head>
<title>pdf test</title>
    <style type="text/css">
        #a {
            position:relative;
            border: 1px solid green;
        }
        #b {
            float: left;
            border: 1px solid red;
        }
    </style>
</head>
<body>

    <div>Top</div>
    <div id="a">
        <div id="b">
            asdf<br/>
            typewriter</br>
            fdsa
        </div>
        <div style="clear:both;"></div>
    </div>
    <div>
        Bottom
    </div>

</body>
</html>

外部的
#a
就像一个普通的div一样工作。这里重要的部分是，#a是position: relative。这设置了一个定位上下文，在其中#b将浮动。这种“双层包裹”的方法将使div仍然在布局中像一个“正常”的div一样工作，同时允许您通过Javascript从#b中“嗅探”宽度/高度，如果需要的话。
所以......这取决于您的需求-但这应该为您指明正确的方向。
祝你好运！
这里我写的所有内容都是真实的，并且它们是有效的，但是@Sammy的答案可能是正确的方式。 - Lee
我不确定 position:relative 在这里是否相关，清除浮动就足够了。如果它是绝对定位而不是浮动的话，那么你可能需要它。 - meder omuraliev
@meder - 你是对的。在这种情况下，除非你对 div#b 使用 position:absolute 而不是 float:left，否则外部 div 是不必要的。 - Lee
2

试试这个CSS：

div {
  display: inline;
}
2

对于任何默认块级元素（如div、h1-h~等），IE不支持Inline-Block。

Inline-Block的行为是自动调整宽度和高度，同时允许使用位置、边距和填充。因此，你所需要做的就是使用

<span style="display: inline-block">
</span>

然后您将拥有一些兼容各种浏览器的代码 :)
享受吧。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接