body:
<div id="two">
<h3>摄影社区热门小镇</h3>
<div id="one">
<img src="img/pic_01.jpg"/ >
<p><span >风景狙击手</span><br/>
成员:80<br/>
作品:276
</p>
</div>
<div id="one">
<img id="three"src="img/pic_02.jpg"/ >
<p><span >叙事感</span><br/>
成员:235<br/>
作品:116
</p>
</div>
<div id="one">
<img class="abc" src="img/pic_03.jpg"/ >
<p ><span >定焦视界</span><br/>
成员:56<br/>
作品:456
<p>
</div>
<div id="one">
<img src="img/pic_04.jpg" >
<p><span >中画幅乐园</span><br/>
成员:130<br/>
作品:239
</p>
</div>
<div id="one">
<img id="four"src="img/pic_05.jpg"/ >
<p><span >《卡啪》先锋...</span><br/>
成员:78<br/>
作品:125
</p>
</div>
<div id="one">
<img src="img/pic_06.jpg" />
<p><span >植物的无声世界</span><br/>
成员:235<br/>
作品:1258
</p>
</div>
</div>
CSS:
*{padding: 0px;margin: 0px;}
#two{
margin:50px auto ;
border: 1px solid grey;
width: 669px;
height: 232px;
}
#one{
display: inline-block;
/* float:left; */
margin:8px;
padding:13px;
}
div{
clear: both;
}
p{ font-size: 5px;
display: inline-block;
margin: 5px;
padding-left: 2px;
color: grey;
line-height: 20px;
}
img{float: left;
border: 1px grey solid;
padding: 1px;
border-radius: 5px;
}
.abc{
margin-left:24px;
}
#three{
margin-left: 5px;
}
#four{
margin-left: 5px;
}
span{
color: blue;
font-size: 10pxpx;
}
h3{
font-size: 0.9375rem;
padding-left: 10px;
}