html - 使用 uikit 一行十张图像

Question

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<div  class="follow uk-grid-collapse uk-child-width-expand@s uk-child-width-1-2   uk-child-height-1-2 "  uk-grid>
        <div><a href="#modal-media-image" uk-toggle><img src="https://source.unsplash.com/150x150/?heli" alt="" ></a></div>
        <div><a href="#modal-media-image2" uk-toggle><img src="https://source.unsplash.com/150x150/?everest" alt="" ></a></div>
        <div><a href="#modal-media-image3" uk-toggle><img src="https://source.unsplash.com/150x150/?cat" alt="" ></a></div>
        <div><a href="#modal-media-image4" uk-toggle><img src="https://source.unsplash.com/150x150/?nepal" alt="" ></a></div>
        <div><a href="#modal-media-image5" uk-toggle><img src="https://source.unsplash.com/150x150/?china" alt="" ></a></div>
        <div><a href="#modal-media-image6" uk-toggle><img src="https://source.unsplash.com/150x150/?japan" alt="" ></a></div>
        <div><a href="#modal-media-image7" uk-toggle><img src="https://source.unsplash.com/150x150/?annapurna" alt="" ></a></div>
        <div><a href="#modal-media-image8" uk-toggle><img src="https://source.unsplash.com/150x150/?food" alt="" ></a></div>
        <div><a href="#modal-media-image9" uk-toggle><img src="https://source.unsplash.com/150x150/?coffee" alt="" ></a></div>
        <div><a href="#modal-media-image10" uk-toggle><img src="https://source.unsplash.com/150x150/?chocolate" alt="" ></a></div>

    </div>

这段代码是纯uikit 3框架写的。我使用网格划分部分。在桌面模式下我只想显示 10 张图像，当我将桌面模式更改为移动模式时，它只显示 2 张图像。它工作正常。但是当我更改为移动模式时，它只显示两个图像，并且还会出现额外的空白区域。我不想要那个额外的空白。我只想要两张全宽的图片。我需要使用 150x150 图像分辨率。

Answer 1

您可以调整对齐方式以消除间距并使所有内容居中:

@media (max-width:640px) {
  .follow > div:nth-child(2n+1) {
    text-align:right;
  }
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<div  class="follow uk-grid-collapse uk-child-width-expand@s uk-child-width-1-2   uk-child-height-1-2 "  uk-grid>
        <div><a href="#modal-media-image" uk-toggle><img src="https://source.unsplash.com/150x150/?heli" alt="" ></a></div>
        <div><a href="#modal-media-image2" uk-toggle><img src="https://source.unsplash.com/150x150/?everest" alt="" ></a></div>
        <div><a href="#modal-media-image3" uk-toggle><img src="https://source.unsplash.com/150x150/?cat" alt="" ></a></div>
        <div><a href="#modal-media-image4" uk-toggle><img src="https://source.unsplash.com/150x150/?nepal" alt="" ></a></div>
        <div><a href="#modal-media-image5" uk-toggle><img src="https://source.unsplash.com/150x150/?china" alt="" ></a></div>
        <div><a href="#modal-media-image6" uk-toggle><img src="https://source.unsplash.com/150x150/?japan" alt="" ></a></div>
        <div><a href="#modal-media-image7" uk-toggle><img src="https://source.unsplash.com/150x150/?annapurna" alt="" ></a></div>
        <div><a href="#modal-media-image8" uk-toggle><img src="https://source.unsplash.com/150x150/?food" alt="" ></a></div>
        <div><a href="#modal-media-image9" uk-toggle><img src="https://source.unsplash.com/150x150/?coffee" alt="" ></a></div>
        <div><a href="#modal-media-image10" uk-toggle><img src="https://source.unsplash.com/150x150/?chocolate" alt="" ></a></div>

    </div>