use*_*442 0 html css text alignment word-wrap
我的网页组成有问题.下一个div显示我的文本和图像框,但文本不包装图像.我怎么解决这个问题？
HTML:
#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;
}CSS:
<!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;
}