Question

我正在让我的应用程序移动响应，所以我正在为某些css添加@media查询。我有一个div包含一个图片列表和相应的名称，但在视图中它不是从第一张图片开始。它将从6日/ 7日开始，具体取决于屏幕尺寸。任何想法如何解决这个问题？

HTML

<div class="left">
          <div class="profTemp">
            <img src="https://s-media-cache-ak0.pinimg.com/736x/24/28/10/242810087197ad884c0d895c2953a740.jpg" width="40" height="40" />
            <span>Frank Ocean</span>
          </div>

          <div class="profTemp">
            <img src="https://i1.sndcdn.com/avatars-000275328494-x0ummz-t500x500.jpg" width="40" height="40" />
            <span>Connie Constance</span>
          </div>


          <div class="profTemp">
            <img src="https://www.tinymixtapes.com/sites/default/files/imagecache/Article_Width/1412/artworks-000097529084-s9nava-t500x500.jpg" width="40" height="40" />
            <span>NAO</span>
          </div>
          <div class="profTemp">
            <img src="https://i1.sndcdn.com/avatars-000282552589-ewmqcs-t500x500.jpg" width="40" height="40" />
            <span>Brent Faiyaz</span>
          </div>

          <div class="profTemp">
            <img src="https://cdn-s3.allmusic.com/release-covers/500/0004/624/0004624822.jpg" width="40" height="40" />
            <span>Solange</span>
          </div>


          <div class="profTemp">
            <img src="https://brightsidelive.com/wp-content/uploads/earl-sweatshirt.jpg" width="40" height="40" />
            <span>Earl Sweatshirt</span>
          </div>
          <div class="profTemp">
            <img src="https://68.media.tumblr.com/5e687ecaa7e8bae1e20e9c80e51185ad/tumblr_o5tp3ucSMB1rtauc1o1_500.jpg" width="40" height="40" />
            <span>Skepta</span>
          </div>
          <div class="profTemp">
            <img src="https://s3.amazonaws.com/bucketeer-373b822b-859a-491c-934d-506d803eb341/artist/vfd9Q9nlJ8adbEtVW9o1nezrbx5Km3Nip3w978xR" width="40" height="40" />
            <span>Ray Blk</span>
          </div>
          <div class="profTemp">
            <img src="https://www.tinymixtapes.com/sites/default/files/imagecache/Article_Width/1412/artworks-000097529084-s9nava-t500x500.jpg" width="40" height="40" />
            <span>NAO</span>
          </div> 
          <div class="profTemp">
            <img src="https://i1.sndcdn.com/artworks-000128440509-uqhyuv-t500x500.jpg" width="40" height="40" />
            <span>Rex Orange County</span>
          </div>
          <div class="profTemp">
            <img src="https://s-media-cache-ak0.pinimg.com/originals/09/b7/27/09b727b145efb31556e50fb5ecbd0774.jpg" width="40" height="40" />
            <span>King Krule</span>
          </div>
          <div class="profTemp">
            <img src="https://i1.sndcdn.com/avatars-000210207184-xy9abz-t500x500.jpg" width="40" height="40" />
            <span>Jamie Isaac</span>
          </div>             
          <div class="profTemp">
            <img src="https://68.media.tumblr.com/3e2529b6651bc7c91683192af22339a8/tumblr_oo0tyzV1Fl1tc0atto1_500.jpg" width="40" height="40" />
            <span>Adwoah Aboah</span>
          </div>

          <div class="profTemp">
            <img src="https://s3.amazonaws.com/beatstarsdata/b.user.data/w/westweekend-152110/gfx/cover-artwork/238117_med_.jpg" width="40" height="40" />
            <span>Tyler</span>
          </div>
          <div class="profTemp">
            <img src="https://dontfckabout.files.wordpress.com/2016/10/yeah-yeah.jpg?w=730" width="40" height="40" />
            <span>Jesse James Solomon</span>
          </div>
          <div class="profTemp">
            <img src="https://i1.sndcdn.com/artworks-000166667136-5heltz-t500x500.jpg" width="40" height="40" />
            <span>Snoochie Shy</span>
          </div>
          <div class="profTemp">
            <img src="https://thumbnailer.mixcloud.com/unsafe/300x300/extaudio/5/3/e/9/0648-ec8e-4d76-923e-1b837ea94eb2.jpg" width="40" height="40" />
            <span>Sofie Fatouretchi</span>
          </div>

          <div class="profTemp">
            <img src="https://68.media.tumblr.com/9bd38039b2ed72c3f8f79b5841c0248c/tumblr_oion4yG1a21rb7lvjo1_500.jpg" width="40" height="40" />
            <span>Steve Lacy</span>
          </div>
          <div class="profTemp">
            <img src="https://68.media.tumblr.com/f281802a37d7ada6b610ad31a862543e/tumblr_nstvm65CZ81r2mlhzo1_500.png" width="40" height="40" />
            <span>Lisa Bonet</span>
          </div>

        </div>

CSS

 .grid
{
    display: grid;
    grid-template-rows: 90px 70% 4.5%;
    background-color: black;
    grid-template-columns: 100%;
    grid-row-gap: 0px;
    overflow: hidden;
}

.left
{
    grid-row: 1;
    overflow-x: auto;
    overflow-y: hidden;
    background-color: #242424;
    grid-column: 1;
    display: flex;
    justify-content: center;
    text-align: center;
    color: white;
}

Answer 1

在“左”课程中，将内容置于左侧

justify-content: left;

div中的元素但在视图中不可滚动

1 个答案: