html - 网站切换到移动 View 时如何消除一些间距

标签 html css

我正在尝试创建一个登录页面,人们可以在其中点击他们想访问的网站。我是编码新手,需要网站移动版方面的帮助。我想去掉一些间距,但我不确定该怎么做。

看到这里,我正试图摆脱移动版本上图像 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/

相关文章:

html - "Web Page, Filtered"中的图像质量

html - 从打印页面中删除 href 而不更改样式

css - H1 大于视口(viewport) - 怎么样?

html - 网站无法在移动设备上正确调整大小

javascript - FancyBox 不会播放 youtube 视频

html - angularjs根据宽度设置div的高度

javascript - HTML 5 SQLite : Multiple Inserts in One Transaction

javascript - 使用 jQuery load() 和 pushState() 模拟帧

css - 样式表参数阻止样式表更改

css - 可重用样式组件的小调整