gpt4 book ai didi

html - 如何正确地在段落旁边 float 图像?

转载 作者:行者123 更新时间:2023-11-28 06:40:05 24 4
gpt4 key购买 nike

我在我的网站中有一个部分,其中有一列图标,旁边有一个段落。我一直在互联网上搜索一个简单的解决方案,但似乎一切都不起作用或弄乱了我的网页。这是我尝试过的最后一件事:

#exw
{
width: 80px;
height: 80px;
float: left;
}

#exx
{
width: 80px;
height: 80px;
float: left;
}

#exy
{
width: 80px;
height: 80px;
float: left;
}

#floats
{
width: auto;
float: right;
margin-right: 530px;
margin-top: 13px;

}



#floats img
{
margin-top: 22px;

}
<div id="floats"> 
<p><img id="exw" src="example.jpg"/>
<p>example</p>

<p><img id="exx" src="example.jpg"/>
<p>example</p>

<p><img id="exy" src="example.jpg"/>
<p>example</p>

</div>

我确信有一个非常简单的解决方案可以解决我的问题,但我想不出来。有人知道我做错了什么吗?谢谢!

PS- 我也确信有一种更简单的方法来编写我使用的代码(例如“class”而不是图标的单独 id)。我正在努力...

最佳答案

您的 HTML 代码有误,您没有关闭 <p>标记,并像这样修改一些 css:

#exw
{
width: 80px;
height: 80px;
float: left;
}
#floats > p {float:left;margin:0;}
#floats > p + p{margin-top:10px;}
#floats > p:nth-of-type(2n+1) {
clear: both;
}

#exx
{
width: 80px;
height: 80px;
float: left;
}

#exy
{
width: 80px;
height: 80px;
float: left;
}

#floats
{
width: auto;
// float: right;
// margin-right: 530px;
margin-top: 13px;

}



<div id="floats"> 
<p><img id="exw" src="example.jpg"/></p>
<p>example</p>

<p><img id="exx" src="example.jpg"/></p>
<p>example</p>

<p><img id="exy" src="example.jpg"/></p>
<p>example</p>

</div>

关于html - 如何正确地在段落旁边 float 图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34349223/

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