请问这样为什么不行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<!-- <meta name=""> -->
<style>
#box {
width: 80%;
margin: 0 auto;
background: #ccc;
text-align: center;
}
#box > img {
display: inline-block;
padding: 1.5%;
width: 21%;
height: 200px;
}
/* mobile first */
/* 宽度为100% 一行显示一张 */
#box img {
width: 100%;
}
/* 宽度小于780 一行显示两张 */
@media (max-width: 780px) {
#box img {
width: 50%;
}
}
/* 宽度小于960 一行显示三张 */
@media (max-width: 960px) {
#box img {
width: 33.333333%;
}
}
/* 宽度大于960 一行显示四张 */
@media (min-width: 960px) {
#box img {
width: 25%;
}
}
</style>
</head>
<body>
<div id="box">
<img
src="http://img1.sycdn.imooc.com/climg/5a45e49100014e5010601059.jpg"
alt=""
/>
<img
src="http://img1.sycdn.imooc.com/climg/5a45e53b00012e6d09940789.jpg"
alt=""
/>
<img
src="http://img1.sycdn.imooc.com/climg/5a45e53c0001d04e09940732.jpg"
alt=""
/>
<img
src="http://img1.sycdn.imooc.com/climg/5a45e49100014e5010601059.jpg"
alt=""
/>
<img
src="http://img1.sycdn.imooc.com/climg/5a45e53b00012e6d09940789.jpg"
alt=""
/>
<img
src="http://img1.sycdn.imooc.com/climg/5a45e53c0001d04e09940732.jpg"
alt=""
/>
</div>
</body>
</html>正在回答 回答被采纳积分+1
同学你好，代码分析如下：
1.#box>img是子集选择器，相当于是更精准的选择到了img标签，那么对于只有img的标签选择器来说，它的权重值就是比标签选择器高，因此这里使用的是子集选择器。
2.针对于代码是自上而下执行的，因此对于响应的宽度也要按照顺序写。里面图片的宽度可以在控制台进行微调
3.当不设置任何响应宽度时，此时的图片是正常显示的，也就是一行显示4列。因此需要将此代码去掉
4.当宽度小于440px时呈现一列没有设置。
祝学习愉快~
-
清夏_ #1
<style>
#box {
width: 80%;
margin: 0 auto;
background: #ccc;
text-align: center;
/* */
}
#box > img {
display: inline-block;
padding: 1.5%;
width: 21%;
height: 200px;
}
/* 宽度小于440px */
@media (max-width: 440px) {
#box > img {
width: 50%;
}
}
/* 宽度小于780 一行显示两张 */
@media (max-width: 780px) {
#box > img {
/* width: 50%; */
width: 30%;
}
}
/* 宽度小于960 一行显示三张 */
@media (max-width: 960px) {
#box > img {
/* width: 33.333333%; */
width: 22%;
}
}
/* 宽度大于960 一行显示四张 */
@media (min-width: 960px) {
#box > img {
width: 25%;
}
}
</style>
我照这样改 一直都是显示三张 没有变
2022-10-23 16:25:25
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星