Отрегулируйте таблицу с изображениями в каждой строке внутри div

Я определил макет, который имеет много элементов. Одним из этих элементов является серый квадрат (div), в который я помещаю таблицу. Эта таблица имеет строки и содержит небольшие изображения.Отрегулируйте таблицу с изображениями в каждой строке внутри div

Я хочу добиться того, чтобы отрегулировать стол внутри его родителей. Я хочу, чтобы изображения загружались автоматически в зависимости от того, сколько они (количество изображений является переменной) ... поэтому при достижении максимального размера серого ящика строка должна сломаться и отправить изображения в следующую строку. Это возможно?

Кроме того, я стараюсь сделать его изменяемым по размеру для разных размеров экрана.

Здесь Css и Html сниппет:

body { 
 
    background-color: #141414; 
 
    margin-top:3%; 
 
    margin-left: 2%; 
 
    margin-right: 2%; 
 
} 
 

 

 
.video-item { 
 
    width: 30%; 
 
    float: left; 
 
    margin-bottom: 5px; 
 
} 
 

 
.video-item-2 { 
 
    width: 66%; 
 
    float: left; 
 
    margin-bottom: 20px; 
 
} 
 

 
.video-display { 
 
    background-color: #1F1F1F; 
 
    height: 450px; 
 
} 
 

 
p { 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
#thumbs { 
 
    word-wrap: break-word; 
 
    table-layout:fixed; 
 
    width: 100%; 
 
} 
 

 
#thumbnail-grid { 
 
    background-color: #1F1F1F; 
 
    height: 450px; 
 

 
} 
 

 
.video-spacer { 
 
    width: 2%; 
 
    float: left; 
 
    min-height: 200px; 
 
} 
 

 
#arrow_up, #arrow_down { 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 

 
#arrow_down { 
 
    -ms-transform: rotate(180deg); /* IE 9 */ 
 
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ 
 
    transform: rotate(180deg); 
 
    }

<body> 
 
<div class="video-item"> 
 
    <p class="font-semibold">Something else</p>   
 
    <div class="video-display"></div> 
 
</div> 
 
    
 
<div class="video-spacer"></div> 
 

 
<div class="video-item-2"> 
 
    <p class="font-semibold">THUMBNAIL PREVIEW</p> 
 
     <div id="thumbnail-grid"> 
 
     <img id="arrow_up" src='http://www.pngdot.com/wp-content/uploads/2015/11/Png_Up_Arrow_01.png' alt="arrow" height="25" width="45"> 
 
      <table id="thumbs"> 
 
      <tr> 
 
        <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td> 
 
       <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td> 
 
       <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td> 
 
       <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td> 
 
       <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td> 
 
       <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td> 
 
       <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td> 
 
       <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td> 
 
       <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td> 
 
       <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td> 
 
       <td tabindex="3"><img id="arrow_up" src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"></td> 
 
       </tr> 
 
      </table> 
 
      <img id="arrow_down" src='http://www.pngdot.com/wp-content/uploads/2015/11/Png_Up_Arrow_01.png' alt="arrow" height="25" width="45"> 
 
     </div> 
 
</div> 
 
</body>

Я хотел бы решить эту проблему только с помощью CSS, но если JS или JQuery необходимо, то я принимаю его.

Спасибо!

источник

2016-01-08 Limon

Я вижу только одну строку в демо, и я вижу только одну строку в коде ... когда вы сказали, «строки» Вы имели в виду «клетки» или «столбцы»? – zer00ne

Вы хотите всегда показывать один ряд изображений за раз, с стрелкой вверх/вниз для прокрутки? – Stickers

@ zer00ne Я написал только одну строку на демо, чтобы изображения, которые переполняют окно, переходят к следующему. Я имел в виду строку, горизонтально – Limon

Вот решение, которое, когда достигает ширины, ворваться в новые линии.

body { 
 
    background-color: #141414; 
 
    margin-top:3%; 
 
    margin-left: 2%; 
 
    margin-right: 2%; 
 
} 
 

 

 
.video-item { 
 
    width: 30%; 
 
    float: left; 
 
    margin-bottom: 5px; 
 
} 
 

 
.video-item-2 { 
 
    width: 66%; 
 
    float: left; 
 
    margin-bottom: 20px; 
 
} 
 

 
.video-display { 
 
    background-color: #1F1F1F; 
 
    height: 450px; 
 
} 
 

 
p { 
 
    color: white; 
 
    text-align: center; 
 
} 
 

 
#thumbs { 
 
    text-align: center; 
 
    max-height: 400px; 
 
    overflow: auto; 
 
} 
 

 
#thumbnail-grid { 
 
    background-color: #1F1F1F; 
 
    height: 450px; 
 
} 
 

 
.video-spacer { 
 
    width: 2%; 
 
    float: left; 
 
    min-height: 200px; 
 
} 
 

 
#arrow_up, #arrow_down { 
 
    display: block; 
 
    margin: 0 auto; 
 
} 
 

 
#arrow_down { 
 
    -ms-transform: rotate(180deg); /* IE 9 */ 
 
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */ 
 
    transform: rotate(180deg); 
 
    }

<body> 
 
<div class="video-item"> 
 
    <p class="font-semibold">Something else</p>   
 
    <div class="video-display"></div> 
 
</div> 
 
    
 
<div class="video-spacer"></div> 
 

 
<div class="video-item-2"> 
 
    <p class="font-semibold">THUMBNAIL PREVIEW</p> 
 
     <div id="thumbnail-grid"> 
 
     <img id="arrow_up" src='http://www.pngdot.com/wp-content/uploads/2015/11/Png_Up_Arrow_01.png' alt="arrow" height="25" width="45"> 
 
     
 
      <div id="thumbs"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 

 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 

 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 

 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 
      <img src='http://oleaass.com/wp-content/uploads/2014/10/Random-truths18.jpg' alt="arrow" height="40" width="60"> 
 

 
      </div> 
 
     <img id="arrow_down" src='http://www.pngdot.com/wp-content/uploads/2015/11/Png_Up_Arrow_01.png' alt="arrow" height="25" width="45"> 
 
     </div> 
 
</div> 
 
</body>

источник

2016-01-08 17:15:38 LGSon

Как я могу центрировать изображения внутри серой коробки? он появляется с небольшим отрывом справа – Limon

@Limon Обновлен мой ответ. Добавлено: '#thumbs {text-align: center; } ' – LGSon

довольно хорошо! всего 2 вещи ... 1). когда я изменяю размер страницы с полным полем, загруженным изображениями, он становится беспорядочным, и изображения вытекают из коробки. 2). Ваше решение действительно для больших экранов? – Limon

Используйте «div» вместо таблицы. Когда вы используете td, каждая ячейка находится в одной строке при использовании в одной строке tr. HTML:

<div id="tableContent"> 
    <img class="singleImage" ....../> 
</div>

и CSS (использование "поплавок"):

.singleImage { 
    height: 40px; 
    width: 60px; 
    float: left; 
}

источник

2016-01-08 16:55:53

Отрегулируйте таблицу с изображениями в каждой строке внутри div

ответ

Смежные вопросы