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

假设我在

div

中有一个

img

元素，如何使用CSS使

div

的内容具有相同的宽度和高度？

试试这个CSS：

div {
  display: inline;
}

---

浮动div会使其收缩包装，因此div只能容纳内部内容

您可能需要对随后出现的元素使用

清除

另一种方法是使用
内联块
内联块是正确的

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

默认情况下，div将具有相同的高度——除非您以某种方式限制它，或者添加填充或边距。但默认宽度将填充可用空间。如果希望宽度向下折叠以“收缩包裹”内容，则必须将其浮动，或使其处于绝对位置

这方面的问题（取决于您的需要）是，这两种方法都会有效地将其从正常布局中移除。如果您需要它仍然是正常布局的一部分，则必须执行以下操作（包括边框，以便您可以知道发生了什么）：


pdf测试
#a{
位置：相对位置；
边框：1px纯绿色；
}
#b{
浮动：左；
边框：1px纯红；
}
顶部
asdf

打字机

fdsa
底部

外部div
#a
的工作方式与普通div类似。这里的重要部分是
#a
是
位置：相对
。这将设置一个定位上下文，其中
#b
将浮动。这种“双包装”方法将使div仍然像“普通”div一样在布局中工作，同时允许您在需要时通过Javascript从
#b
中“嗅探”宽度/高度

所以。。。这取决于你的需求是什么——但这应该为你指明正确的方向

祝你好运
 IE中不支持任何默认块级元素（如div、h1-h~等）的内联块

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

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



然后您将获得一些与浏览器兼容的代码：）

享受。
@Marko-Huh？我忘了什么吗？+1误读了这个问题，以为他想让一个孩子来代替父母。要删除那条评论吗，在这条评论之后再简短一点：）hahadoes内联块在大多数浏览器中都有效吗？我从来没有真正使用过它，因为我不确定它。IE在本机内联元素上支持内联块，您需要声明
display:inline之后只在本机块级别上对IE进行了测试。我认为内联块的浏览器支持有限（即，我认为它对IE的支持非常有限），但我刚刚在Safari（webkit）和Firefox上测试了您的示例，它的效果非常好。。。多年来一直在这样做——每天学习新的东西。谢谢萨米@李，你说得对。我只是在IE6、7和8中进行了测试，在这三个版本中，宽度都不受图像大小的限制。哦，我自己从来没有真正觉得有必要使用这个。我在这里写的所有东西都是真的——它会起作用的——但是@Sammy的答案可能是正确的。我不知道
位置：相对
在这里有什么关系，你清除浮动，这就是所有必要的。如果它是绝对的而不是浮动的，那么你就需要它。@meder-你说得对。在此上下文中，外部div是不必要的，除非对
div\b
使用
position:absolute
而不是
float:left
。
<span style="display: inline-block">
</span>