body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.uj {
background-color: aqua;
display: inline-block;
}
.qw {
height: 200px;
float: left;
}<img src="https://picsum.photos/200/300" class="qw" alt="" height="22px">
<span>other text</span>
<div class="uj">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique pariatur t a quam eligendi dolores earum in officia qui maiores, doloremque repellendus dolore a chitecto, quaerat assumenda odio eaque! Saepe, et.</div>
<img src="https://placehold.co/400" alt="" height="22px">在此，当我们从 uj 类中删除 inline-block 时，lorem ipsum 出现在图像的左侧，而当我们保留它时，它会出现在图像后面的新行中。尽管跨度文本始终出现在图像的左侧。你能告诉我为什么吗？
如果未定义内联块元素的宽度，则元素框将缩小以适应内容。您有很多文本，因此它将占据容器的整个宽度，即容器的 100%。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.cont{
width: 50%
}
.uj{
background-color: aqua;
display: inline-block;
}
.qw{
height:200px;
float: left;
}
</style>
</head>
<body>
<div class='cont'>
<img src="https://picsum.photos/200/300" class="qw" alt="" height="22px">
<span >other text</span>
<div class="uj">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique pariatur t a quam eligendi dolores earum in officia qui maiores, doloremque repellendus dolore a chitecto, quaerat assumenda odio eaque! Saepe, et.</div>
<img src="https://placehold.co/400" alt="" height="22px">
</div>
<div class='cont'>
<img src="https://picsum.photos/200/300" class="qw" alt="" height="22px">
<span >other text</span>
<div class="uj">Lorem ipsum </div>
<img src="https://placehold.co/400" alt="" height="22px">
</div>
</body>
</html>