html - 在表格数据中并排对齐 div - CSS

Question

我想在响应式表格中并排显示 div。

这是我的 HTML:

<div>
   <table>
      <tr>
         <td class="td-prio" style="width: 100px; height: 100px;">
            <div class="panel panel-default" id="E3kRzMgJDPbcBeWwY" style="border-style: solid; cursor: move;">
               <div class="panel-heading">
                  Test1
               </div>
               <div class="panel-body">
                  Test 1 Body
               </div>
            </div>
            <div class="panel panel-default" id="ASDdsgADogiesbfd" style="border-style: solid; cursor: move;">
               <div class="panel-heading">
                  Test2
               </div>
               <div class="panel-body">
                  Test 2 Body
               </div>
            </div>
            <div class="panel panel-default" id="ifsdfuHKJFSas4t" style="border-style: solid; cursor: move;">
               <div class="panel-heading">
                  Test3
               </div>
               <div class="panel-body">
                  Test 3 Body
               </div>
            </div>
         </td>
      </tr>
   </table>
</div>

目前它看起来像这样:

这是期望的结果:

或者如果表格宽度较小:

如有任何帮助，我们将不胜感激。

Answer 1

将其写入您的 CSS:

.panel{
    float: left;
}

这是一个 fiddle .

(请注意，我也需要更改 td 的宽度 500px，以便为多个 div 腾出空间。)