你好,这个需要使用媒体查询来实现。
.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}