Html Grid使用Ul li

Question

我需要帮助。 Plz见附图。我正在尝试使用任何高度的html ul li制作网格。我试图将列一个接一个地放在一起，两者之间没有任何空白区域。但不幸的是，第四列正在走下坡路。怎么解决？

      ul.brik{
    margin-left:-5px;
      }

      ul.brik li{
       display:inline-block;
        width:32.5%;
        margin-left:5px;
       vertical-align:top;
        }

Answer 1

假设您不介意垂直排序列而不是水平排列，并且您不需要在旧版浏览器中使用它：

display: flex;
flex-flow: column wrap;

可能还有其他一些flexbox properties会让你获得那种布局。

Answer 2

这种情况正在发生，因为每个ul都显示在当前所在行的顶部。一旦引入换行符，下一个ul将出现在您看到的位置。

要解决此问题，请将每列分隔为div，然后将ul放入其中。

您需要将div的显示设置为inline-block才能使它们水平堆叠。

Answer 3

我不太确定你在寻找什么。它看起来像你用更多的div分开它们，我认为你可以添加一个

min-height:50px;
max-height:250px
overflow:hidden; 
/* you could also try*/
position:absolute;
top:20px;
left:20px;