gpt4 book ai didi

html - 无法让文字显示在图片下方

转载 作者:行者123 更新时间:2023-11-28 19:13:18 24 4
gpt4 key购买 nike

我试图让文字出现在图片下方,但它一点动静也没有。我的目标是让文本出现在容器中图像的下方

  
.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 的默认值是静态的,这样元素就会以特定的顺序呈现(这是你想要的,之后呈现 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/

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