我正在尝试创建一个登录页面,人们可以在其中点击他们想访问的网站。我是编码新手,需要网站移动版方面的帮助。我想去掉一些间距,但我不确定该怎么做。
看到这里,我正试图摆脱移动版本上图像 block 之间的间距。 Mobile version of site
谢谢!
CSS
body {
width:100%;
height: 100%;
margin: 0;
}
.flex {
display:flex;
max-width: 80%;
}
.flex div{
flex:1;
padding:20px;
}
img{
margin:30% auto 30%;
width:100%;
@media only screen and (max-width:620px) {
.flex, .flex div, img {
display:inline;
width:100%;
float:left;
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<div class="flex">
<div>
<img src="https://via.placeholder.com/926x1104" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" />
</div>
<div>
<img src="https://via.placeholder.com/926x1104" />
</div>
</div>
</body>
</html>
最佳答案
您应该向我们提供更多信息。但是要摆脱所有的间距,您可以在移动设备上尝试这样做:
@media only screen and (max-width:620px) {
.flex, .flex div, img {
display:inline;
width:100%;
float:left;
max-width: 100%;
padding: 0;
margin: 0;
}
关于html - 网站切换到移动 View 时如何消除一些间距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55599821/