​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上测试,如果使用请注意兼容性,有任何问题都可以提问

 

相关文章
|
7天前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
19 4
|
7天前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
21天前
|
前端开发 容器
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等,解释了这些属性在弹性盒子布局中的作用和用法。
|
21天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
2月前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局?
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局?
50 3
|
2月前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
45 3
|
2月前
|
前端开发 开发者 容器
【Web布局的革命】探索CSS Grid栅格系统,打造未来网页设计!
【8月更文挑战第25天】在网页设计领域,布局至关重要。传统的布局方法难以满足复杂需求,CSS Grid 栅格系统因此诞生。它是一种二维布局模式,能直接控制行和列,简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器,并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸,轻松实现响应式布局。此外,CSS Grid 支持高级功能,如网格区域划分和对齐设置,极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强,CSS Grid 必将成为未来网页设计的关键技术之一。
56 1
|
2月前
|
前端开发 JavaScript Serverless
揭秘CSS布局神器:vw/vh、rem、%与px大PK,掌握它们,让你的网页设计秒变高大上,面试难题迎刃而解!
【8月更文挑战第4天】在Web开发中,合理选择CSS单位对响应式布局至关重要。本文探索viewport单位(vw/vh)、rem、百分比(%)及像素(px)的基础知识与应用场景。通过代码示例,展示如何运用这些单位实现全屏布局、尺寸比例调整、灵活的元素大小及固定尺寸。最后,模拟面试题,介绍如何仅用CSS实现一个元素的高度为其宽度两倍且响应视口变化的方法。
188 8
|
2月前
|
前端开发
CSS Grid 布局:span 关键字
CSS Grid 布局:span 关键字
51 0
|
2月前
|
前端开发 容器
css中弹性布局使用方法
css中弹性布局使用方法
42 0