Question

我有一个div包含一个图像，我想自动调整div的内容并使用其中一种可能的方法：display：inline-block（其他是float等等）。

在以像素为单位指定图像大小之前，这非常正常，但是当我使用％来指定大小的一切都会发生变化时，即使在调整图像大小之后，div也会拉伸到原始图像大小的宽度。 / p>

您可以使用以下方法测试问题：

BUG:
<div style="width: 1000px; position: relative">
	<div style="display: inline-block; background-color: #ff0000">
		<img src="http://placehold.it/1200x1500" style="width: 30%">
	</div>
</div>

WORKING:
<div style="width: 1000px; position: relative">
	<div style="display: inline-block; background-color: #ff0000; position: relative">
		<img src="http://placehold.it/1200x1500" style="width: 300px">
	</div>
</div>

我使用了300px，因为位置：relative的容器宽度为1000px。根据css规范，所有元素都使用第一个位置：相对元素作为参数，绝对定位等。

对我而言，渲染过程中的一个错误似乎是图像应该调整大小但是必须重新应用所有css以匹配图像的新大小。

显然，当您想将该div用作参考点时，会导致一些问题，例如：

BUG:
<div style="width: 1000px; position: relative">
	<div style="display: inline-block; background-color: #ff0000">
		<div style="position: absolute; top: 10px; right: 10px">My Floating Div</div>
		<img src="http://placehold.it/1200x1500" style="width: 30%">
	</div>
</div>

<br>

WORKING:
<div style="width: 1000px; position: relative">
	<div style="display: inline-block; background-color: #ff0000; position: relative">
		<div style="position: absolute; top: 10px; right: 10px">My Floating Div</div>
		<img src="http://placehold.it/1200x1500" style="width: 300px">
	</div>
</div>

有些人可能会建议使用30vw大小而不是30％来解决这个问题，但这会导致30％的大小调整到视口大小，而不是容器div大小，实际上是1000px大小。

1000px是一个简单的例子，同样的人可以告诉好男人，所以为什么不手动指定一切，但如果我的宽度：calc（100px + 3em - 5in / 2 vw）...？事情会变得棘手

Answer 1

这不是一个错误。百分比定义了相对于父级的百分比，父级是具有自动宽度的内联块元素，因此行为是预期的。更改为内联并且可以正常工作

＆＃13;

BUG:
<div style="width: 1000px; position: relative">
	<div style="display: inline; background-color: #ff0000">
		<div style="position: absolute; top: 10px; right: 10px">My Floating Div</div>
		<img src="http://placehold.it/1200x1500" style="width: 30%">
	</div>
</div>

<br>

WORKING:
<div style="width: 1000px; position: relative">
	<div style="display: inline-block; background-color: #ff0000; position: relative">
		<div style="position: absolute; top: 10px; right: 10px">My Floating Div</div>
		<img src="http://placehold.it/1200x1500" style="width: 300px">
	</div>
</div>

＆＃13;

我在某些浏览器上发现了CSS渲染中的错误吗？涉及webkit和gecko

1 个答案: