如何從去屏幕外

Question

停止CSS錶行這裏的的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>