代码之家  ›  专栏  ›  技术社区  ›  Phill Pafford

带有网格状布局的CSS布局高度问题

  •  0
  • Phill Pafford  · 技术社区  · 14 年前

    所以我有一个大的表单,并且在字段集中对类似的元素进行了分组,但是所有字段集都有不同的高度。我将字段集向左浮动,这样任何额外的字段集都将被推到下面(到达屏幕边缘时请考虑下一行)。

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

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

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

    1 回复  |  直到 14 年前
        1
  •  3
  •   John Hartsock    14 年前

    你必须做出一些选择,因为这不能完全按照你想要的方式使用纯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来操纵字段集的高度。