div+css实现div每行显示N列,超出换行

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xqq580231/article/details/79002362

默认情况下,div是一个元素就换一行,要实现每行中显示固定的列,比如两列。

1、已知只有一行,那么两个元素分别用float属性就可以实现两列


 
<div style="width: 100%; column-count: 2;column-gap: 3px;padding: 0px;">
    <div>first div</div>
    <div>second div</div>
</div>

2、已知两列,但未确定几行,这个时候是一个foreach循环,那么就可以采用以下方式:

//column-count  表示显示几列
//column-gap    表示两个元素中间间隔距离
<div style="width: 100%; column-count: 2; column-gap: 3px;">
    <div>first div</div>
    <div>second div</div>
</div>

 

 

 

 

 

展开阅读全文

没有更多推荐了,返回首页