Question

我正在创建一个大型菜单，试图保持当前水平； CSS，jQuery，引导程序。

我的菜单用于产品类别，我希望以列报纸样式动态创建。很简单，我的工作很好。它需要固定的高度，使其水平溢出。

我目前的想法是在加载时增加每个子菜单的高度，直到没有水平溢出为止。我可以通过一些手动干预使其工作，这违背了动态布局的目的。

.container {
  width: 800px;
  height: 100px;
  display: flex;
  flex: 1 1 auto;
}

.container .wrap {
  display: flex;
  flex: 1 1 auto;
  flex-flow: column wrap;
  align-content: flex-start;
}

.container .wrap .item {
  width: 150px;
}

<div class="container">
  <div class="wrap">
    <div class="item">Item 1<br>a<br>b</div>
    <div class="item">Item 2<br>a</div>
    <div class="item">Item 3<br>a<br>b<br>c<br>d</div>
    <div class="item">Item 4<br>a</div>
    <div class="item">Item 5<br>a</div>
  </div>
</div>

这种样式可以根据需要完美地将项目从上到下，从左到右对齐。

现在，我正在尝试根据需要增加每个子菜单的高度。最好的解决方案是检测宽度溢出并增加高度以进行补偿。

我尝试使用本机JS和jQuery，但似乎无法在函数中运行它。我可以检测到溢出并增加高度，如下所示。我想要的是让if语句循环并在没有更多溢出的情况下退出，并最终完美匹配。

编辑当前的工作解决方案

$(function () {
    $(".container").each( function( index, element ){
        var my_height = $(element).outerHeight();

        if( $(element).prop('scrollWidth') > $(element).outerWidth() ) {
            while( $(element).prop('scrollWidth') > $(element).outerWidth() )
            {
                my_height += 100;
                $(element).css('height', my_height + "px");
            }
        }
    });
});

完全按预期工作。

编辑

更新的问题。有更好的解决方案吗？不涉及在每个页面上遍历每个项目的东西。纯CSS会很好，但是暂时还不可能。

解决了我的过渡问题。当尝试如上所述在循环中更新高度时，过渡CSS会干扰并创建无限循环。修复起来很简单，我在.container .transition中添加了一个新类，并在开始或循环中添加了$(element).removeClass("transition");，并在末尾添加了$(element).addClass("transition");。这将从内部循环中删除过渡CSS，并将其添加回末尾。

最终编辑

我的第一次尝试是使用css列，但是我无法使其按我的规范工作。直到阅读下面接受的答案后，我才重新浏览专栏，并在进行一些测试后使其生效。

参考https://developer.mozilla.org/en-US/docs/Web/CSS/columns

Answer 1

有一种使用column CSS属性使用纯CSS的方法：

基本CSS：

.container {
    width: 800px;
}
.container .wrap {}
.container .wrap .item {
    width: 150px;
}

要具有固定宽度的列：

.container .wrap {
    column-width: 125px;
}

要设置一定数量的列：

.container .wrap {
    column-count: 5;
}

JSFiddle

Another answer giving details about browser support

css flex列自动高度

1 个答案: