你好，这个需要使用媒体查询来实现。
.gridContainer {
margin-left: auto
margin-right: auto
width: 86.45%
}
.img { width:50%}
@media only screen and (min-width: 481px) {
.gridContainer {
width: 90.675%
padding-left: 1.1625%
padding-right: 1.1625%
}
.img { width:60%}
}
@media only screen and (min-width: 769px) {
gridContainer {
width: 88.5%
max-width: 1232px
}
.img { width:80%}
}
ul是个块元素，按照块元素的属性这个ul应该单独占一行。img标签应该另起一行。之所以没有令起一行，是因为你给li添加了左浮动。然后并没有在ul清楚浮动，所以浮动让img标签也不令起一行了。问题就是没有清楚浮动导致的，那怎么清楚浮动呢？清楚浮动的方法有很多，我说说常用的两个。一个是给ul标签添加overflow：hidden属性。就是在css样式表里添加 ul｛overflow:hidden｝ 。第二个使用:after伪类结合clear属性清除浮动。具体代码 ul:after｛content:""clear:both｝<div style="width:200pxheight:170pxtext-align:centerfloat:left"><div style="height:140pxbackground:#ccc"><img src="图片地址"></div>
<div style="height:20pxbackground:#369margin-top:10px">这里是标题</div>
</div>
<div style="width:200pxheight:160pxtext-align:centerfloat:leftmargin-left:20px">
<div style="height:140pxbackground:#ccc"><img src="图片地址"></div>
<div style="height:20pxbackground:#369margin-top:10px">这里放标题</div>
</div>
我不知道你的代码是怎么写的
只能做个例子给你看是不是要这种效果
