时间戳

首页 > 解决方案 > 当网站切换到移动视图时如何摆脱一些间距

html - 当网站切换到移动视图时如何摆脱一些间距

问题描述

我正在尝试创建一个登陆页面，人们可以在其中点击他们想要访问的网站。我是编码新手，需要一些有关网站移动版本的帮助。我想摆脱一些间距，但我不知道该怎么做。

看到这里，我试图摆脱移动版本上图像块之间的间距。移动版网站

谢谢！

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>

标签： htmlcss

解决方案

您应该向我们提供更多信息。但是要摆脱所有间距，您可以在移动设备上尝试此操作：

@media only screen and (max-width:620px) {
  .flex, .flex div, img {
    display:inline;
    width:100%;
    float:left;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

推荐阅读