CSS多列布局实现方法大全

前端技术 2023/09/08 CSS

摘要：
　　多列布局在网站应用中也是经常见到的，今天就分享4中多列布局。

display:table


复制代码
代码如下:

<style>
.table {
width: auto;
min-width: 1000px;
margin: 0 auto;
padding: 0;
display:table;
}
.tableRow {
display: table-row;
}
.tableCell {
border: 1px solid red;
display: table-cell;
width: 33%;
}
</style>
<div class=\"table\" >
<div class=\"tableRow\" >
<div class=\"tableCell\" >
one
</div>
<div class=\"tableCell\" >
two
</div>
<div class=\"tableCell\" >
three
</div>
</div>
</div>

float


复制代码
代码如下:

<style>
.row {
float: left;
width: 33%;
border: 1px solid red;
}
</style>
<div class=\"row\" >
one
</div>
<div class=\"row\" >
two
</div>
<div class=\"row\" >
three
</div>

display: inline-block


复制代码
代码如下:

<style>
.row {
display: inline-block;
width: 32%;
border: 1px solid red;
}
</style>
<div class=\"row\" >
one
</div>
<div class=\"row\" >
two
</div>
<div class=\"row\" >
three
</div>

column-count


复制代码
代码如下:

<style>
.column {
/* 设置列数 */
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
/* 设置列之间的间距 */
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;
/* 设置列之间的规则 */
-moz-column-rule:4px outset #ff0000; /* Firefox */
-webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */
column-rule:4px outset #ff0000;
}
</style>
<div class=\"column\"></div>

小结：
　　以上代码都是在chrome上测试，如果使用请注意兼容性，有任何问题都可以提问

本文地址：https://www.stayed.cn/item/22492

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案