使用 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>