我的网页组成有问题。下一个div显示我的文本和图像框，但文本不包装图像。我怎么解决这个问题？
#boxx {
padding: 20px 20px 20px 20px;
position: fixed;
left: 30%;
border: 2px solid black;
font: 2em Calibri;
width: 500px;
height: 1000px;
}
img {
position: fixed;
left: 30%;
display: block;
margin: 7px 7px 7px 7px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Чехов</title>
<link rel="stylesheet" href="design.css" />
</head>
<body>
<h2 style="text-align: center">Антон Павлович Чехов</h2>
<div id="boxx">Антон Павлович Чехов (17 [29] Січень 1860 — 2 [15] липня 1904) — російський письменник, загальновизнаний класик світової літератури. За професією лікар.</div>
<img src="1.jpg" alt="Chehov">
</body>
</html>对于一个你需要在与文本相同的容器中（#boxx）。你不能使用position: fixed。 fixed和absolute位置从文档流中删除元素，这意味着它们不会粘附在它们周围的其他元素上。您可以在此时将img设置为float:left：
HTML
<h2 style="text-align: center">Антон Павлович Чехов</h2>
<div id="boxx">
<img src="http://www.placecage.com/100/100" alt="Chehov">
Антон Павлович Чехов (17 [29] Січень 1860 — 2 [15] липня 1904) — російський письменник, загальновизнаний класик світової літератури. За професією лікар.
</div>
CSS
#boxx{
padding: 20px 20px 20px 20px;
position: fixed;
left: 30%;
border: 2px solid black;
font: 2em Calibri;
width:500px;
height: 1000px;
}
img{
float: left;
vertical-align: top;
margin: 7px 7px 7px 7px;
}
只需将float:left添加到图像中即可获得结果
CSS
#boxx img{
float:left;
}