Question

这里是JSFiddle：https://jsfiddle.net/xerooz5p/

<div class="row">

        <div class="cellForAlbum">

            <a href="spotify:track:3KiexfmhxHvG5IgAElmTkd">
                <img src="https://i.scdn.co/image/1e6c3774deb8c44852ac169e03ce3f7a37c936af" alt="" />
            </a>

            <div class="albumName">
                <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div -->
                <div style="display:none;">Please Please Me (Remastered)</div>
                <span class="caption">Please Please Me  - 1</span>              
            </div>

        </div>

        <div class="cellForAlbum">

            <a href="spotify:track:4ekUX4pWizXXksJe0JfS9U">
                <img src="https://i.scdn.co/image/1e684af9619d7310229826fab2d6ce490cb954f1" alt="" />
            </a>

            <div class="albumName">
                <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div -->
                <div style="display:none;">With The Beatles (Remastered)</div>
                <span class="caption">With The Beatles  - 3</span>              
            </div>

        </div>

        <div class="cellForAlbum">

            <a href="spotify:track:5J2CHimS7dWYMImCHkEFaJ">
                <img src="https://i.scdn.co/image/56f312139863addd3837e68e6c198150e80f510a" alt="" />
            </a>

            <div class="albumName">
                <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div -->
                <div style="display:none;">A Hard Day&#39;s Night (Remastered)</div>
                <span class="caption">A Hard Day&#39;s Night  - 2</span>                
            </div>

        </div>

        <div class="cellForAlbum">

            <a href="spotify:track:4ltC6PrqkTtpcRNi5lvS4z">
                <img src="https://i.scdn.co/image/863e2f879a99e4afb084a6d0eb39ef37e596d5d2" alt="" />
            </a>

            <div class="albumName">
                <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div -->
                <div style="display:none;">Beatles For Sale (Remastered)</div>
                <span class="caption">Beatles For Sale  - 4</span>              
            </div>

        </div>

        <div class="cellForAlbum">

            <a href="spotify:track:06ypiqmILMdVeaiErMFA91">
                <img src="https://i.scdn.co/image/e26910fd9e7bb1671213cb9ed06a855077ddd79f" alt="" />
            </a>

            <div class="albumName">
                <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div -->
                <div style="display:none;">Rubber Soul (Remastered)</div>
                <span class="caption">Rubber Soul  - 3</span>               
            </div>

        </div>

        <div class="cellForAlbum">

            <a href="spotify:track:4BRkPBUxOYffM2QXVlq7aC">
                <img src="https://i.scdn.co/image/75ef0990aa0bb02ef7f6a52d41cc2c4c8028c3ba" alt="" />
            </a>

            <div class="albumName">
                <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div -->
                <div style="display:none;">Revolver (Remastered)</div>
                <span class="caption">Revolver  - 4</span>              
            </div>

        </div>

        <div class="cellForAlbum">

            <a href="spotify:track:0qHMhBZqYb99yhX9BHcIkV">
                <img src="https://i.scdn.co/image/5efcba83e06ce03ca843b459a4189f861ddc5f23" alt="" />
            </a>

            <div class="albumName">
                <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div -->
                <div style="display:none;">Magical Mystery Tour (Remastered)</div>
                <span class="caption">Magical Mystery Tour  - 2</span>              
            </div>

        </div>

        <div class="cellForAlbum">

            <a href="spotify:track:0j3p1p06deJ7f9xmJ9yG22">
                <img src="https://i.scdn.co/image/2782d94528b449fb6910300cc8c8f93ab8cc7a8d" alt="" />
            </a>

            <div class="albumName">
                <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div -->
                <div style="display:none;">The Beatles (Remastered)</div>
                <span class="caption">The Beatles  - 5</span>               
            </div>

        </div>

        <div class="cellForAlbum">

            <a href="spotify:track:0CaBBQsaAiRHhiLmzi7ZRp">
                <img src="https://i.scdn.co/image/b3651a85f2bca826b38194c51d09cd7b068aa3ab" alt="" />
            </a>

            <div class="albumName">
                <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div -->
                <div style="display:none;">Let It Be (Remastered)</div>
                <span class="caption">Let It Be  - 2</span>             
            </div>

        </div>

</div>

现在，表格行的宽度由其中的单元格数量来设定。所以宽度就像1600，它离开屏幕，我必须水平滚动才能看到它们。有没有办法阻止它，所以它没有超过我的显示器的宽度？

Answer 1

也许table-layout是您所寻找的，最终max-width代表img：

.table {
  display: table;
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}
.row {
  display: table-row;
}
.cellForArtistName {
  display: table-cell;
}
.cellForAlbum {
  display: table-cell;
  overflow: hidden;
  padding: 5px;
}
.artistName {
  font-size: 40px;
  margin: 0px 0px 0px 0px;
  padding-bottom: 10px;
  padding-top: 35px;
}
img {
  max-width: 100%;
}
.albumName {
  /*width: 175px;*/
}

<div class="table">
  <div class="row">
    <div class="cellForArtistName">
      <p class="artistName">The Beatles</p>
    </div>
  </div>
  <div class="row">
    <div class="cellForAlbum">
      <a href="spotify:track:3KiexfmhxHvG5IgAElmTkd">
        <img src="https://i.scdn.co/image/1e6c3774deb8c44852ac169e03ce3f7a37c936af" alt="" />
      </a>
      <div class="albumName">
        <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div -->
        <div style="display:none;">Please Please Me (Remastered)</div>
        <span class="caption">Please Please Me  - 1</span>
      </div>
    </div>
    <div class="cellForAlbum">
      <a href="spotify:track:4ekUX4pWizXXksJe0JfS9U">
        <img src="https://i.scdn.co/image/1e684af9619d7310229826fab2d6ce490cb954f1" alt="" />
      </a>
      <div class="albumName">
        <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div -->
        <div style="display:none;">With The Beatles (Remastered)</div>
        <span class="caption">With The Beatles  - 3</span>
      </div>
    </div>
    <div class="cellForAlbum">
      <a href="spotify:track:5J2CHimS7dWYMImCHkEFaJ">
        <img src="https://i.scdn.co/image/56f312139863addd3837e68e6c198150e80f510a" alt="" />
      </a>
      <div class="albumName">
        <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div -->
        <div style="display:none;">A Hard Day&#39;s Night (Remastered)</div>
        <span class="caption">A Hard Day&#39;s Night  - 2</span>
      </div>
    </div>
    <div class="cellForAlbum">
      <a href="spotify:track:4ltC6PrqkTtpcRNi5lvS4z">
        <img src="https://i.scdn.co/image/863e2f879a99e4afb084a6d0eb39ef37e596d5d2" alt="" />
      </a>
      <div class="albumName">
        <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div -->
        <div style="display:none;">Beatles For Sale (Remastered)</div>
        <span class="caption">Beatles For Sale  - 4</span>
      </div>
    </div>
    <div class="cellForAlbum">
      <a href="spotify:track:06ypiqmILMdVeaiErMFA91">
        <img src="https://i.scdn.co/image/e26910fd9e7bb1671213cb9ed06a855077ddd79f" alt="" />
      </a>
      <div class="albumName">
        <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div -->
        <div style="display:none;">Rubber Soul (Remastered)</div>
        <span class="caption">Rubber Soul  - 3</span>
      </div>
    </div>
    <div class="cellForAlbum">
      <a href="spotify:track:4BRkPBUxOYffM2QXVlq7aC">
        <img src="https://i.scdn.co/image/75ef0990aa0bb02ef7f6a52d41cc2c4c8028c3ba" alt="" />
      </a>
      <div class="albumName">
        <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div -->
        <div style="display:none;">Revolver (Remastered)</div>
        <span class="caption">Revolver  - 4</span>
      </div>
    </div>
    <div class="cellForAlbum">
      <a href="spotify:track:0qHMhBZqYb99yhX9BHcIkV">
        <img src="https://i.scdn.co/image/5efcba83e06ce03ca843b459a4189f861ddc5f23" alt="" />
      </a>
      <div class="albumName">
        <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div -->
        <div style="display:none;">Magical Mystery Tour (Remastered)</div>
        <span class="caption">Magical Mystery Tour  - 2</span>
      </div>
    </div>
    <div class="cellForAlbum">
      <a href="spotify:track:0j3p1p06deJ7f9xmJ9yG22">
        <img src="https://i.scdn.co/image/2782d94528b449fb6910300cc8c8f93ab8cc7a8d" alt="" />
      </a>
      <div class="albumName">
        <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div -->
        <div style="display:none;">The Beatles (Remastered)</div>
        <span class="caption">The Beatles  - 5</span>
      </div>
    </div>
    <div class="cellForAlbum">
      <a href="spotify:track:0CaBBQsaAiRHhiLmzi7ZRp">
        <img src="https://i.scdn.co/image/b3651a85f2bca826b38194c51d09cd7b068aa3ab" alt="" />
      </a>
      <div class="albumName">
        <!-- the below hidden div has the album name that gets sent to the server onclick of this albumName div -->
        <div style="display:none;">Let It Be (Remastered)</div>
        <span class="caption">Let It Be  - 2</span>
      </div>
    </div>
  </div>
</div>

如何阻止CSS表行离开屏幕

1 个答案: