Question

我对CSS有点生疏，但我希望有人可以帮助我。我真正想要的是将2张相同尺寸/细胞的桌子并排放置在我的页面中心。这就是为什么我希望将它们保存为2个单独的表...当屏幕调整得更窄（比如在移动设备上）时，我希望Right表能够完全位于Left table下方的中心位置。如果我尝试仅使用表格进行此操作，则2个表格不能并排放置（即使有足够的空间）。我在这里阅读了许多Q＆amp; A，引导我使用Div包装器（父母）和2＆＃39; child＆＃39; div的。问题是，如果包装div中包含所有内容，它会将2个表视为一个大块，并且当屏幕变得更窄时，不会将第2个表格向下发送到下一行。没有设计一个单独的移动网站，任何解决方案？

Answer 1

以全屏模式运行下面的代码段并尝试调整浏览器的大小。如果结果符合您的要求，请根据您的需要进行自定义。

修改：您还可以使用media queries更改具有特定尺寸范围的屏幕的显示，如编辑后的代码所示。

＆＃13;

#center {
  width:80%;
  margin:auto;
}
.table {
  width:45%;
  min-width:300px;
  height:150px;
  float:left;
  border:1px solid;
  margin:auto;
}
.table table {
  width:100%;
}
td {
  border:1px solid #990000;
}

@media screen and (max-width: 900px) {
.table {
    width:80%;
    float:none;
    margin:auto;
}
}

＆＃13;

<div id='center'>
<div class='table'>
  <table>
    <td>
    </td>
  </table>
</div>
<div class='table'>
  <table>
    <td>
    </td>
  </table>
</div>
</div>

＆＃13;

将两个div并排放置，无需包装

1 个答案: