​4种实现多列布局css

简介: 摘要:   多列布局在网站应用中也是经常见到的,今天就分享4中多列布局。 display:table .table { width: auto; min-width: 1000px; marg...

摘要:

  多列布局在网站应用中也是经常见到的,今天就分享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上测试,如果使用请注意兼容性,有任何问题都可以提问

 

相关文章
|
1月前
|
前端开发 UED 容器
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
|
1月前
|
前端开发 JavaScript 开发者
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
|
1月前
|
前端开发 容器
实现CSS品字布局
【10月更文挑战第27天】
|
2月前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
67 4
|
2月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
3月前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
3月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
4月前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局?
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局?
194 3
|
4月前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
65 3