我试图让文本出现在图像下方，但它根本没有移动。我的目标是让文本出现在容器中图像的下方
.left-col p {
text-align: justify;
width: 300px;
}
.left-col img {
margin: 0 auto;
left: 5%;
width: 300px;
height: 130px;
position: absolute;
text-align: center;
}</head>
<body>
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="Cyber.jpg" width="200" height=150"/>
<p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium
</p>最佳答案
不要使用绝对位置，而是将其删除。原因是该元素是相对于其第一个定位的(非静态)祖先元素定位的。所以，你当然可以弄乱顶部、右侧和左侧的值来使其工作，但它根本不会响应。 在这里阅读更多相关信息:MDN Position CSS
position 的默认值是 static，这样元素就会按照特定的顺序渲染(这就是你想要的，在之后渲染 img 和 p)。
如果您需要的话，这就是笔:
<div class="header">
<h1>The 3 Column Layout</h1>
</div>
<div class="container">
<div class="left-col">
<img src="https://via.placeholder.com/200x150" width="200" height="150" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec iaculis neque nec luctus maximus. Donec eu eleifend libero, nec scelerisque metus. Morbi volutpat turpis pretium </p>
</div>
</div>
.left-col p{
text-align: justify;
width:300px;
}
.left-col img{
width:300px;
height: 130px;
}
此外，您可以只为 .left-col div 设置一次，而不是为段落和 img 设置宽度 300px。我还删除了您未使用的其他属性。
另一个注意事项是您忘记了“on height 属性。
关于html - 无法让文本出现在图像下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58920049/