gpt4 book ai didi

html - 如何在div中将文字环绕在图像周围?

转载 作者:太空宇宙 更新时间:2023-11-03 19:58:12 25 4
gpt4 key购买 nike

我的网页构成有问题。下一个 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)。你不能使用位置:固定fixedabsolute 位置将元素从文档流中移除,这意味着它们不会粘附在它们周围的其他元素上。您可以在此时将 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

关于html - 如何在div中将文字环绕在图像周围?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27653123/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com