Question

我有一个问题，我在盒子里面设置了一个图像，但是当我运行程序时，我看到该框没有包含图像。

我尝试修复它并意识到当我取出align = "left"属性时，问题就会消失。

我不明白为什么会发生这种情况，或者如果有人能够解释这种情况会如何避免这种情况。

您可以看到结果here

＆＃13;

div.body {
  background-color: blue;
  padding: 15px;
  height: auto;
}

＆＃13;

<div class="body">
  <img id="full" src="../Photos/controler.png" alt="altvalue" hspace="15" usemap="imgmap" align="left" />
</div>

＆＃13;

Answer 1

您需要在(max-)width:100%中设置img，并且不要使用html align或hspace，已弃用。

当您使用align=left（现在在CSS中用作float:left）时，您将元素从正常的DOM流中取出，并放置在其容器的左侧，此内容将环绕＆＃34;浮动＆＃34;元件

＆＃13;

div.body {
  background-color: blue;
  padding: 15px;
  height: auto;
}
#full {
  width: 100% /* or max-width */
}

＆＃13;

<div class="body">
  <img id="full" src="//lorempixel.com/1000/1000" alt="altvalue" usemap="imgmap" />
</div>

＆＃13;

Answer 2

在div中使用overflow:hidden：

＆＃13;

div.body
{
	background-color:blue;
	padding:15px;
	height:auto;
        overflow:hidden;

}

＆＃13;

<div class = "body">	
  <img id = "full" src = "../Photos/controler.png" alt = "altvalue" hspace = "15" usemap = "imgmap" align = "left"/>
</div>

＆＃13;

Answer 3

假设你需要对齐=＆＃34;左＆＃34;在那里，无论出于何种原因，你都可以“清除”＃34;通过添加div.body { background-color:blue; padding:15px; height:auto; width:100%; overflow:auto; }

添加父容器

{{1}}

Answer 4

float元素总是销毁其子元素height。因此，更好的解决方案使用overflow:hidden或使用clearfix hack，请参阅What is clearfix?和here