Question

我想要实现的目标可能非常业余，但我仍然陷入困境。我的目标是连续使用一系列表格，当屏幕缩小时，表格会根据需要掉落一行以腾出空间。我有点设法实现这一目标，但表格的容器并没有按照要求行事。

图像1：在第一张图像中，两个表都可以放在同一行的页面上，容器可以正确地适合内容（表格）。

图2：一旦桌子掉下来（因为没有空间），容器没有正确反应并缩小尺寸以适应现在较小的柱子。

我目前的设置基本上是

<div class="green">
   <div class="red"><table></table></div>
   <div class="red"><table></table></div>
</div>

div是带有自动权限的内联块。左边距。这些表也设置为内联块。

感谢您的时间和帮助。

Answer 1

如果这是您正在寻找的内容，请告诉我，请尝试以下css：

.green{
  width: 80%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
}
.red{
  display: inline-block;
}
table{
  border: 1px solid black;
  width: 300px;
}

您可以将绿色类的宽度与您的父容器所需的宽度互换。您的父容器和表格有宽度，否则浏览器不知道何时在新行上显示表格。

这是codepen

万一你希望看到flexbox版本，这里是css：

.green{
  display: flex;
  justify-content: center;
  flex-flow: row wrap;
}
table{
 border: 1px solid black;
 width: 300px;
}

响应式设计与Divs中的表

1 个答案: