如何在div中的图像周围换行？答案

【问题标题】：How to wrap text around image in div?如何在div中的图像周围换行？
【发布时间】：2023-03-23 03:45:01
【问题描述】：

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

【问题讨论】：

你能简单介绍一下吗？您的预期结果是什么？

标签： html css text alignment word-wrap

【解决方案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

【讨论】：

【解决方案2】：

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

CSS

#boxx img{
    float:left;
}

【讨论】：