内容不固定三列多行等高布局

纵饮孤独 提交于 2019-11-28 05:55:21

之前做过很多多列固定高度的样式,这种三列里面内容是不一样高度的,但是需要展示成跟列表一样,三列多行规规整整的;
如果用float进行布局的话,会导致一行只展示两列的情况;
如果用display:inline-block;进行行内块的话,会导致瀑布流的情况,没有办法像表格一样根据内容的高度而定;
所以我用的flex进行布局可以完美的解决这个问题。

// father
ul {
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
// son
ul li {
    width: 33.33%;
}

如果解决了你的问题,请给我点个赞哦!

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!