html并排放置多个表格

Question

我有六张并排的 table 。每个表格都包含一个带有标题的顶部单元格和带有不同数量文本的下一个单元格。每个表格都设置为 30% 宽度并具有 10px 的填充。这些表格包含在整体 <div> 中每个表都设置为float: left .在笔记本电脑屏幕上，这些通常会在屏幕顶部对齐 3 个表格，然后在下方对齐 3 个表格。

[1][2][3]  
[4][5][6]  

然而，在某些浏览器或其他设备上，文本将占用表 1 中的更多空间，从而使表变长。这导致表 4 在表 2 下排序，而不是在表 1 下排序，例如

[1][2][3]  
   [4][5]  
[6]  

有什么方法可以让它们按顺序排列，总是先占据最左边的空间？

代码示例:

table,
td {
  border: 1px solid black;
}

table {
  float: left;
  width: 30%;
  margin: 10px;
}

<div>

  <table>
    <tbody>
      <tr>
        <td>Title 1</td>
        <td>Text text text text text text text text Text text text text text text text text</td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <td>Title 2</td>
        <td>Text text text text text text text text</td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <td>Title 3</td>
        <td>Text text text text text text text text</td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <td>Title 4</td>
        <td>Text text text text text text text text</td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <td>Title 5</td>
        <td>Text text text text text text text text</td>
      </tr>
    </tbody>
  </table>

  <table>
    <tbody>
      <tr>
        <td>Title 6</td>
        <td>Text text text text text text text text</td>
      </tr>
    </tbody>
  </table>

</div>

Answer 1

根据您提供的链接，这不是使用表格的地方，而是使用带有 css 标记的 div 元素的地方。

有些人会说 Flexbox 是可行的方法，而且它可能是。

另一种方法是使用设置为 display: table-cell 的 div 元素，但这些元素有其自身的问题，我不建议这样做布局。

我提供的解决方案将您的代码重构为 div 元素，其中一些功能可确保它在各种宽度下始终看起来很好(允许它在响应尺寸下“灵活”)。

See the Fiddle Here - 拉伸(stretch)宽度，你会看到盒子的宽度被限制了，它们会上下移动来调整。

这是标记:

<div class="container">
  <div>
    <h2>Title</h2>
    <img src="http://weavingtheworld.co.uk/images/slide01_small_brilliant-2.jpg">
    <div class="text">
      Body text goes here
    </div>
  </div>
  <div>
    <h2>Title</h2>
    <img src="http://weavingtheworld.co.uk/images/slide01_small_brilliant-2.jpg">
    <div class="text">
      Body text goes here
    </div>
  </div>
  <div>
    <h2>Title</h2>
    <img src="http://weavingtheworld.co.uk/images/slide01_small_brilliant-2.jpg">
    <div class="text">
      Body text goes here
    </div>
  </div>
  <div>
    <h2>Title</h2>
    <img src="http://weavingtheworld.co.uk/images/slide01_small_brilliant-2.jpg">
    <div class="text">
      Body text goes here
    </div>
  </div>
  <div>
    <h2>Title</h2>
    <img src="http://weavingtheworld.co.uk/images/slide01_small_brilliant-2.jpg">
    <div class="text">
      Body text goes here
    </div>
  </div>
  <div>
    <h2>Title</h2>
    <img src="http://weavingtheworld.co.uk/images/slide01_small_brilliant-2.jpg">
    <div class="text">
      Body text goes here
    </div>
  </div>
</div>

这种布局有一个根本性的弱点，那就是每个元素的高度不是自动的/保证相同(你的表格布局目前有同样的缺陷，仅供引用)。 (Flexbox 修复了这个缺陷)。要克服它，您必须做两件事:

1. 确保您的图片的比例完全相同(不是大小、比例)。
2. 对文本容器应用固定的高度。

这里是注释的 CSS，并附有关于为什么使用每个(有趣的)声明的注释。

.container > div {
  /* block properties become available, but only takes the designated width */
  display: inline-block;
  /* this tells it to include padding & borders when calculating width */
  box-sizing: border-box;
  width: 30%;
  padding: 15px;
  /* min / max width ensure it's always within a "reasonable" width window.  
  This means at responsive it can / will reduce to 2 side-by-side, 
  and at larger sizes would increase to 3 or 4 side-by-side */
  max-width: 250px;
  min-width: 200px;
}

.container > div img {
  /* ensure the image takes the full width of the space */
  width: 100%;
  /* this ensures the image is always proportioned properly */
  height: auto;
}

.container div.text {
  /* this is the weakness of this layout.  To get all the boxes to be the same height, you have to set this to a fixed height. */
  height: 200px;
}