在表数据中并排对齐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提供空间。）

Answer 2

如果您想获得响应效果，则不应将宽度设置为.td-prio。 另外你可以添加

float: left 

到你的divs

这是jsfiddle：http://jsfiddle.net/8yLL7erv/