Question

我不能让我的两张桌子彼此相邻。第二个蓝色方框（较小的方框）一直位于第一个方框下方。我尝试使用＆＃34; display：inline-block＆＃34;和＆＃34;浮动：左＆＃34;在每一个元素上，但没有任何反应。请帮忙？

＆＃13;

#zero-data {
  border: 1px solid black;
  height: 200px;
  width: 200px;
  text-align: center;
}

#table-12 tr {
  display: inline-block;
}

.data-1234 {
  border: 1px solid blue;
  width: 95px;
  height: 95px;
  text-align: center;
}

#table-34 tr {
  display: inline-block;
}

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="Problem.css">
</head>

<body>

  <!-- big table -->
  <table id="zero-table">
    <tr id="zero-row">
      <td id="zero-data">0</td>
    </tr>
  </table>

  <!-- tables 1 & 2 -->
  <table id="table-12">
    <tr id="row-1">
      <td class="data-1234">1</td>
    </tr>
    <tr id="row-2">
      <td class="data-1234">2</td>
    </tr>
  </table>

  <!-- tables 3 & 4 -->
  <table id="table-34">
    <tr id="row-3">
      <td class="data-1234">3</td>
    </tr>
    <tr id="row-4">
      <td class="data-1234">4</td>
    </tr>
  </table>

</body>

</html>

＆＃13;

Answer 1

喜欢这个吗？

＆＃13;

    Hi Team,  
    I have a html page and 'onload' of the DOM I am getting a json data object from the back-end service.

＆＃13;

.wrapper {
  background-color: red;
}

#zero-table,
#table-12,
#table-34 {
  float: left;
}

#zero-data {
  border: 1px solid black;
  height: 200px;
  width: 200px;
  text-align: center;
}

.data-1234 {
  border: 1px solid blue;
  width: 95px;
  height: 95px;
  text-align: center;
}

＆＃13;

Answer 2

试试鬼栏。将它放在每个表之间。

<!-- your table -->
<!--[if (gte mso 9)|(IE)]> 
</td> 
<td width="150" align="left" valign="top"> 
<![endif]-->
<!-- your table -->

将它放入表格后，应开始正确对齐。将TD的宽度更改为代码中应该包含的宽度。让我告诉你。

Answer 3

无需为每个元素添加Float。由于您希望第二个和第三个表出现在第一个表旁边，因此您只需将Float添加到第一个表中：

#zero-table { float: left; }

universal

如何让我的两张桌子彼此对齐？

3 个答案: