Question

假设我在img中有一个div元素，如何使用CSS使div的内容宽度和高度相同？

Answer 1

浮动div将使其收缩包装，因此div只能为内容提供空间。

您可能需要对之后的元素使用clear。

另一种方法是使用inline-block。

Answer 2

内联块是正确的。

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

Answer 3

默认情况下，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>

外部div #a就像普通的div一样。这里的重要部分是#a是position: relative。这会设置一个定位上下文，#b将浮动。这种“双重包裹”方法将让div仍然在布局中像“普通”div一样工作，同时允许你通过Javascript从#b“嗅探”宽度/高度，如果你需要它。

所以......这取决于你的需求 - 但这应该让你朝着正确的方向前进。

祝你好运！

Answer 4

试试这个css：

div {
  display: inline;
}

Answer 5

IE中不支持任何默认块级元素的内联块（如div，h1-h~et等）。

内联块行为是自动调整宽度和高度，同时允许位置，边距和填充等内容。所以你真正需要做的就是使用

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

然后你会有一些与浏览器兼容的代码：）

享受。

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

5 个答案: