Question

我有3个宽度为300px的表。表可以折叠或可见。我必须以这样的方式安排它们：如果只有一个表可见，它就会出现在页面的中心（即表格应该居中对齐）。此外，表格应根据屏幕大小调整其位置。例如 - 如果屏幕大小为1300px，则所有三个表都应水平放置，如果屏幕大小为700px，则两个表应并排放置，一个表应低于它们。

事情尝试了：

我试过制作一个容器并使其集中对齐，但是没有用。
我也试过制作一张包含这三张桌子的桌子，但是根据屏幕的大小我无法定位它们（如果屏幕尺寸减小而我不想要水平卷轴）

Answer 1

如果可能的话，使用bootstrap，它们提供了你需要的精彩网格系统。它非常适合响应式设计，只需将类分配给元素即可。阅读“http://getbootstrap.com/css/”

Answer 2

<div style="margin: 0 auto;width: 95%;">
<div style="display: inline-block; width:300px">
    <table>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>
</div>
<div style="display: inline-block; width:300px">
    <table>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>
</div>
<div style="display: inline-block; width:300px">
    <table>
      <tr>
        <th>Month</th>
        <th>Savings</th>
      </tr>
      <tr>
        <td>January</td>
        <td>$100</td>
      </tr>
    </table>
</div>
</div>

在html中调整div

2 个答案: