61,112
社区成员
发帖
与我相关
我的任务
分享大佬们帮我看一看，，做的静态页面一缩小，排版就会乱
* {
margin: 0;
padding: 0;
}
.box {
background-color: red;
width: 600px;
height: 400px;
margin: 200px auto;
}
ul {
/* width: 700px; */
background-color: #000;
}
li {
background-color: aqua;
float: left;
width: 198px;
height: 198px;
border: 1px solid #fff;
}
img {
width: 198px;
height: 198px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#"><img src="./images/img1.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/img1.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/img1.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/img1.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/img1.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/img1.jpg" alt=""></a></li>
</ul>
</div>
</body>
margin: 0;
padding: 0;
}
.box {
background-color: red;
width: 600px;
height: 400px;
margin: 200px auto;
}
ul {
/* width: 700px; */
background-color: #000;
}
li {
background-color: aqua;
float: left;
width: 198px;
height: 198px;
border: 1px solid #fff;
}
img {
width: 198px;
height: 198px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><a href="#"><img src="./images/img1.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/img1.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/img1.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/img1.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/img1.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/img1.jpg" alt=""></a></li>
</ul>
</div>
</body>
...全文
请发表友善的回复…
发表回复
weixin_50944805 2020-09-29
- 打赏
- 举报
没有乱啊，你用的是什么浏览器，缩小说的是浏览器窗口吗
一叶知秋~ 2020-09-29
- 打赏
- 举报
可能还没学到那儿吧[/quote] 那现在你可以用下百分比，还有不通的浏览器兼容性不一样，你要注意一下
新手の自学小白 2020-09-29
- 打赏
- 举报
可能还没学到那儿吧
新手の自学小白 2020-09-29
- 打赏
- 举报
我看网上视频和我学这点机构都用的px
一叶知秋~ 2020-09-29
- 打赏
- 举报
建议最好不要用px作为长度单位 可以用em 或者rem 他们的用法与规则百度一下就出来了，这个适合写响应式页面，这样的话就可以伸缩自如
shuxhan 2020-09-29
- 打赏
- 举报
给li加一个box-sizing: border-box的属性
新手の自学小白 2020-09-29
- 打赏
- 举报
请问3个盒子设置33.33%吗，边框该怎么算？
新手の自学小白 2020-09-29
- 打赏
- 举报
必须要有边框该怎么解决呢
新手の自学小白 2020-09-29
- 打赏
- 举报
假如必须要加边框该怎么解决呢
一个假的前端男 2020-09-29
- 打赏
- 举报
宽度设置成百分比
shuxhan 2020-09-29
- 打赏
- 举报
把边框去掉，或者用IE盒子模型，你这边框占位了，缩放可能会错位
FLTmiao 2020-09-29
- 打赏
- 举报
如果不想图片跟着缩，那就是图片的最外层div给一个固定宽度，后续你缩小屏幕，图片不会压缩一堆
新手の自学小白 2020-09-29
- 打赏
- 举报
对啊，如图二
