Question

所以我有一个大的表单，并在字段集中对相似的元素进行了分组，但所有的字段集都有不同的高度。我将字段集浮动到左侧，因此任何额外的字段集将被推到下面（当到达屏幕边缘时想想下一行）。

如何让所有字段集与该行中最高的字段集具有相同的高度？

fieldset {
    float: left;
    width: 278px;
    margin: 10px;
    height: inherit; 
    display: inline;
    border: 1px solid #000000;
}

除高度问题外，这有些工作。我不想要一个真正的网格，而是一个动态网格布局，所以如果有800x600屏幕的人看到该网站，我在页面上有九个字段集，他们应该看到类似3x3网格的东西。如果你有一个更大的屏幕，你可能会看到像5x4网格。

Answer 1

你必须做出一些选择，因为这不能完全按你想要的方式使用纯CSS。使用Javascript你可以使这个工作，但不是纯CSS。

考虑到这一点。您可以使用可滚动的div替换字段集以获得所需的CSS版本（请注意，在所有情况下都不会显示div的全部内容。用户可能需要滚动）。例如：

<style>
  div {
    float: left;
    width: 278px;
    margin: 10px;
    height: 100px; 
    border: 1px solid #000000;
    overflow: auto;
  }
</style>

您可以尝试here

最后，另一个选择是在元素加载后使用javascript操纵字段集的高度。

css布局高度问题与网格布局

1 个答案: