Question

我的网页构成有问题。下一个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>

Answer 1

您需要将其与文本（#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; 
}

FIDDLE

Answer 2

只需将float:left添加到图片即可获得结果

<强> CSS

#boxx img{
    float:left;
}

如何在div中包装图像周围的文字？

2 个答案: