html并排显示多个表

我有六张并排的桌子。每个表包含一个顶部单元格和一个下一个单元格，顶部单元格有一个标题，下一个单元格有不同数量的文本。每个表格都设置为30%的宽度，并具有10px的填充。这些表包含在一个整体的

中，每个表都设置为

浮动：左

。在笔记本电脑屏幕上，通常会在屏幕顶部对齐3张桌子，然后在屏幕下方对齐3张桌子

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

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

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

有没有办法让他们按顺序排列，总是先占据最左边的空间

代码示例：

表格，
运输署{
边框：1px纯黑；
}
桌子{
浮动：左；
宽度：30%；
利润率：10px；
}

标题1
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
标题2
文本文本文本文本文本文本文本文本文本文本
标题3
文本文本文本文本文本文本文本文本文本文本
标题4
文本文本文本文本文本文本文本文本文本文本
标题5
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
标题6
文本文本文本文本文本文本文本文本文本文本

您需要的是

垂直对齐：顶部

以及

显示：内联块

下面是一个例子：

---

PS：确保您没有对表应用任何浮动（或设置

float:none

如果继承）

根据您提供的链接，这里不是使用表的地方，而是使用带有css标记的

div

元素

有些人会说Flexbox是一条路要走，而且可能是

另一种方法是使用设置为

display:table cell

的

div

元素，但这些元素有自己的问题，我不建议使用这种布局

我提供的解决方案将您的代码重构为

div

元素，并提供了一些功能，以确保它在不同的宽度下始终保持良好的外观（允许它在响应大小上“灵活”）

-拉伸宽度，您将看到框的宽度受到约束，并且它们会上下移动以进行调整

以下是标记：

<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>

---

使用内联块而不是浮点。我也不建议更改tables display属性，因为它可能会对布局产生不必要的影响，但您可以将表包装在div中，并将样式添加到其中

表格，
运输署{
边框：1px纯黑；
}
桌子{
宽度：100%；
}
包装袋{
宽度：30%；
显示：内联块；
利润率：10px；
}

标题1
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
标题2
文本文本文本文本文本文本文本文本文本文本
标题3
文本文本文本文本文本文本文本文本文本文本
标题4
文本文本文本文本文本文本文本文本文本文本
标题5
文本文本文本文本文本文本文本文本文本文本
标题6
文本文本文本文本文本文本文本文本文本文本

其他答案没有提到的一个解决方案是每隔三个表清除浮动。由于表格的宽度是窗口的1/3，这将创建三个表格的“行”

表格，
运输署{
边框：1px纯黑；
}
桌子{
浮动：左；
宽度：30%；
利润率：10px；
}
表：第n个子项（3n+1）{
清除：左；
}

标题1
文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
标题2
文本文本文本文本文本文本文本文本文本文本
标题3
文本文本文本文本文本文本文本文本文本文本
标题4
文本文本文本文本文本文本文本文本文本文本
标题5
文本文本文本文本文本文本文本文本文本文本
标题6
文本文本文本文本文本文本文本文本文本文本

你能用JSFIDLE.net来展示这种行为吗？你好，克里斯，欢迎来到SO。请展示一些您已经尝试过的代码并查看这些页面：/您应该使用响应网格进行布局，而不是超级表。我无法重现您的问题。因此，请以我的JSFIDLE为基础，展示您正在经历的行为（同时在您的问题中添加一个JSFIDLE）：这如何解决OP问题中宽度不均匀的部分？请参阅weavingtheworld.co.uk/test2.htmlAs isherwood上的示例。isherwood指出，您不应该使用表格来定义布局@当我发布答案时，没有提供任何代码或链接。这太棒了！谢谢克里斯-很高兴我能帮上忙。如果您发现StackOverflow上的答案很有用，那么向上投票（单击左侧分数上方的灰色箭头）是一种很好的形式。如果这是你问题的“答案”，那么最好是“接受”（单击左侧分数下方的灰色复选标记）。干杯用于布局的表格？这不是一个好计划：@cale_b，你似乎在错误的地方发表了评论。不过，你说得对，只有在设计电子邮件时，使用表格进行布局才是一个好主意。

.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;
}