在 div 内的每一行中调整 table

Question

我定义了一个包含很多元素的布局。其中一个元素是一个灰色框（div），我在其中放置了一个 table。 table 有行并且包含小图像。

我想实现的是调整里面的table parents。我希望根据图像的数量自动加载图像（图像的数量是可变的）......所以当达到灰色框最大尺寸时，该行应该断开并将图像发送到下一行。这可能吗？

此外，我尝试使它可以调整大小以适应不同的屏幕尺寸。

此处 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，那我接受。

谢谢！

Answer 1

使用 "div" 而不是 table。当您使用 td 标签时，每个单元格在单个 tr 行中使用时都在同一行中。 HTML:

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

和CSS（使用"float"）：

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

Answer 2

这是一个解决方案，当达到宽度时，会换行。

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>

在 div 内的每一行中调整 table

Adjust table with images in every row inside a div

html

css

html-table

grid-layout