我在我的网站上有一个部分,其中有一列图标,旁边有一个段落。我一直在互联网上搜索一个简单的解决方案,但似乎一切都不起作用或弄乱了我的网页。这是我尝试过的最后一件事:
#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 - 我也确信有一种更简单的方法来编写我使用的代码(比如“类”而不是图标的单独id)。我正在努力......
答案 0 :(得分:0)
您的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>