Question

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

在这里看到，我试图摆脱移动版本上图像块之间的间距。 Mobile version of site

谢谢！

CSS

<!DOCTYPE DOC PUBLIC "-//USA-DOD//DTD 38784STD-BV7//EN"[
<!ENTITY cdcs_4-48.wmf SYSTEM "graphics\CDCS_4-48.wmf" NDATA wmf>
<!ENTITY cdcs_2-24.wmf SYSTEM "graphics\CDCS_2-24.wmf" NDATA wmf>
<!ENTITY cdcs_2-5.wmf SYSTEM "graphics\CDCS_2-5.wmf" NDATA wmf>
<!ENTITY cdcs_3-5.wmf SYSTEM "graphics\CDCS_3-5.wmf" NDATA wmf>
<!ENTITY cdcs_2-19.wmf SYSTEM "graphics\CDCS_2-19.wmf" NDATA wmf>
<!ENTITY cdcs_2-2a.wmf SYSTEM "graphics\CDCS_2-2A.wmf" NDATA wmf>
<!ENTITY cdcs_5-35.wmf SYSTEM "graphics\CDCS_5-35.wmf" NDATA wmf>
<doc service="xs" docid="BKw46" docstat="formal" verstatpg="ver" cycle="1" chglevel="1">
<front numcols="1">
<idinfo>
<?Pub Lcl _divid="100" _parentid="0">
<tmidno>Life with Pets</tmidno>
<chgnum>Change 1</chgnum>
<chgdate>2 August 2018</chgdate>
<chghistory>
<chginfo>
<chgtxt>Change 1</chgtxt>
<date>2 August 2018</date>
</front>
<body numcols="1">
<chapter>
<title>This is chapter 1</title>
<para0>
<title>Climb the ladder immedietly</title>
<para>Retrieve the cat.</para></para0></chapter>
<chapter>
<title>Don't forget to feed the dog</title>
<para0>
<title>Prep for puppies</title>
<para>Puppies are cute</para></para0>
</chapter>
</body>
</doc>

HTML

 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;
  }
}

Answer 1

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

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

Answer 2

一些需要更改的地方：

杀死媒体查询中的浮点数。您正在使用flex，所以
将重置添加到html和body。
在媒体查询中，使用justify-content和flex-direction。将最大宽度设置为100％

错误的TL：DR是，您在媒体查询中浮动元素，并且给它们提供的宽度小于100％，这就是为什么它们不在移动设备上居中的原因。

<?php

namespace App\Enums;


class PostTypes extends BasicEnum
{
    const POST    = 'post';
    const NEWS    = 'news';
    const SERVICE    = 'service';
}

/**
 * Determine whether the user can create reactions.
 *
 * @param User $user
 * @return mixed
 */
public function create(User $user)
{
    return $user->can(Permissions::REACTIONS_CREATE);
}

希望这会有所帮助。

网站切换到移动视图时如何消除空白

2 个答案: