Question

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

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

但是在某些浏览器或其他设备上，文本将在表1中占用更多空间，从而使表格更长。这导致表4在表2下而不是在表1下排序，例如表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是可行的方式，也可能是。

另一种方法是使用设置为div的{{1}}元素，但这些元素有自己的问题，并且不会成为我对此布局的推荐。

解决方案我提供了将您的代码重构为display: table-cell个元素的解决方案，其中一些功能可确保它在各种宽度下始终保持良好状态（允许它在响应的大小上实现＆＃34; flex＆＃34; ）。

See the Fiddle Here - 拉伸宽度，您会看到框宽度受到约束，并且它们会上下移动以进行调整。

这是标记：

div

这种布局存在一个根本性的缺点，那就是每个元素的高度不是自动的/保证是相同的（你的表格布局中存在同样的缺陷，FYI）。（Flexbox修复了这个漏洞）。要克服它，你必须做两件事：

确保您的图像比例完全相同（不是尺寸，比例）。
将固定的<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>应用于文本容器。

这里是评论的CSS，附有关于为什么使用每个（有趣的）声明的注释。

height

Answer 2

使用inline-block而不是float。我不建议更改表格显示属性，因为它可能会对布局产生不良影响，但您可以将表格包装在div中并将样式添加到它们中。

＆＃13;

table,
td {
  border: 1px solid black;
}
table {
  width: 100%;
}
div.wrap {
  width: 30%;
  display: inline-block;
  margin: 10px;
}

＆＃13;

<div>
  <div class="wrap">
    <table>
      <tbody>
        <tr>
          <td>Title 1</td>
          <td>Text text text text text text text text Text text text text text text text text Text text text text text text text text</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="wrap">
    <table>
      <tbody>
        <tr>
          <td>Title 2</td>
          <td>Text text text text text text text text</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="wrap">
    <table>
      <tbody>
        <tr>
          <td>Title 3</td>
          <td>Text text text text text text text text</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="wrap">
    <table>
      <tbody>
        <tr>
          <td>Title 4</td>
          <td>Text text text text text text text text</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="wrap">
    <table>
      <tbody>
        <tr>
          <td>Title 5</td>
          <td>Text text text text text text text text</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="wrap">
    <table>
      <tbody>
        <tr>
          <td>Title 6</td>
          <td>Text text text text text text text text</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

＆＃13;

Answer 3

您需要的是Type以及vertical-align: top。

这是一个例子的小提琴：https://jsfiddle.net/ocv2y1t7/

PS：确保您不会将任何花车应用到您的桌子上（或者如果继承则设置display: inline-block）

Answer 4

另一个解决方案没有提到的解决方法是每隔三个表清除浮点数。由于表格的宽度是窗口的1/3，因此这将创建＆＃34;行＆＃34;每张三张桌子。

＆＃13;

table,
td {
  border: 1px solid black;
}

table {
  float: left;
  width: 30%;
  margin: 10px;
}

table:nth-child(3n+1) {
  clear:left;
}

＆＃13;

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

＆＃13;

html多个表并排

4 个答案: