gpt4 book ai didi

html - 未对齐的图像下方有文字? CSS/HTML

转载 作者:太空宇宙 更新时间:2023-11-04 06:56:22 26 4
gpt4 key购买 nike

unaligned images and text

我已尝试输入之前问题的建议,但似乎我已经能够成功找到将这些图像与其下方的文本对齐的正确方法。

<section id="boxes">
<div class="container">
<div class="box">
<img src="./images/dayporter2.jpeg">
<h3>DAYPORT</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod
tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="box">
<img src="./images/floorcare1.jpeg">
<div class="box">
<h3>FLOOR CARE</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="box">
<img src="./images/janitor2.jpeg">
</div>
</section>

/* boxes */


#boxes{
margin-top: 20px;
}


#boxes .box{
float: left;
text-align: center;
width: 30%;
padding: 10px;
}

#boxes .box img{
width: 90px;
}`

最佳答案

你似乎有一个不必要的 div 标签。

删除'floorcare1.jpeg' img 后的 div 标签,在这里:

<img src="./images/floorcare1.jpeg">
<div class="box"> //remove this

关于html - 未对齐的图像下方有文字? CSS/HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52413145/

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