CSS 常见布局

简介: CSS 常见布局

左列固定宽度,右列自适应

使用flex布局实现

.container{
    display: flex;
}
.l{
    width: 100px;
}
.r{
    flex: 1;
}
AI 代码解读

使用float以及margin实现

.l{
    width: 100px;
    float: left;
}
.r{
    margin-left: 100px;
}
AI 代码解读

使用float以及overflow实现

.l{
    width: 100px;
    float: left;
}
.r{
    overflow: hidden;
}
AI 代码解读

通过设置overflow创建了一个BFC,可以形成一个独立的容器,浮动盒区域不叠加在BFC上,容器内子元素不会影响到外面的元素,反之亦然。设置overflow:auto;等都能达到同样效果,只需要形成一个BFC。

使用table实现

.container{
    display: table;
    table-layout: fixed;
    width: 100%;
}
.l{
    width: 100px;
}
.r, .l{
    display: table-cell;
}
AI 代码解读

右列固定宽度,左列自适应

使用flex布局实现

.container{
    display: flex;
}
.l{
    flex: 1;
}
.r{
    width: 100px;
}
AI 代码解读

使用float以及margin实现

.l{
    float: left;
    margin-right: -100px;
    width: 100%;
}
.r{
    float: right;
    width: 100px;
}
AI 代码解读

使用table实现

.container{
    display: table;
    table-layout: fixed;
    width: 100%;
}
.r{
    width: 100px;
}
.l, .r{
    display: table-cell;
}
AI 代码解读

两侧固定宽度,中间自适应

使用flex布局

.container{
    display: flex;
}
.l{
    width: 100px;
}
.c{
    flex: 1;
}
.r{
    width: 100px;
}
AI 代码解读

使用float以及margin布局

 .container{
            
}
.l{
    float: left;
    width: 100px;
}
.c{
    float: left;
    margin-right: -200px;
    width: 100%;
}
.r{
    float: left;
    width: 100px;
}
AI 代码解读

使用table布局

.container{
    display: table;
    table-layout: fixed;
    width: 100%;
}
.l{
    width: 100px;
}
.r{
    width: 100px;
}
.l, .r, .c{
    display: table-cell;
}
AI 代码解读

左列不定宽,右列自适应

利用flex实现

.container{
    display: flex;
}
.r{
    flex: 1;
}
AI 代码解读

利用table实现

.container{
    display: table;
}
.l{
    background-color: red;
    width: 1%;
}
.r{
    background-color: gainsboro;
}
.l, .r{
    display: table-cell;
}
AI 代码解读

利用float实现

左侧元素浮动,右侧元素通过overflow形成BFC。

.l{
    float: left;
    background-color: blanchedalmond;
}
.r{
    overflow: hidden;
    background-color: red;
}
AI 代码解读

多列等分布局

利用flex实现

.container{
    display: flex;
}
.ele{
    flex: 1;
}
AI 代码解读

利用float实现

.ele{
    float: left;
    width: 25%;
}
AI 代码解读

利用table实现

.container{
    display: table;
    width: 100%;
    table-layout: fixed;
}
.ele{
    display: table-cell;
}
AI 代码解读
染陌
+关注
目录
打赏
0
0
0
0
1360
分享
相关文章
在 CSS 中使用 Flex 布局实现页面自适应时需要注意什么?
【10月更文挑战第22天】在使用 Flex 布局实现页面自适应时,需要对其基本原理和特性有深入的理解,同时结合具体的布局需求和场景,进行细致的调整和优化。通过合理的设置和注意事项的把握,才能实现理想的自适应效果,提升用户体验。还可以根据实际情况进行更深入的探索和实践,以不断提升 Flex 布局的应用能力。
掌握 CSS 弹性布局(Flexbox):构建复杂页面布局的高效秘籍与实战案例
CSS弹性布局(Flexbox)是现代网页设计中构建复杂页面布局的高效工具。本文将深入浅出地介绍Flexbox的核心概念、使用技巧及实际应用案例,帮助读者快速掌握这一强大布局方法。
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
187 4
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
实现CSS品字布局
【10月更文挑战第27天】
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等,解释了这些属性在弹性盒子布局中的作用和用法。
CSS如何优雅实现卡片多行排列布局?
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局?
609 3
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
119 3
【Web布局的革命】探索CSS Grid栅格系统,打造未来网页设计!
【8月更文挑战第25天】在网页设计领域,布局至关重要。传统的布局方法难以满足复杂需求,CSS Grid 栅格系统因此诞生。它是一种二维布局模式,能直接控制行和列,简化复杂网格的设计。通过定义 `display: grid;` 创建网格容器,并利用 `grid-template-columns` 和 `grid-template-rows` 设置行列尺寸,轻松实现响应式布局。此外,CSS Grid 支持高级功能,如网格区域划分和对齐设置,极大提升了布局的灵活性和创意空间。随着浏览器兼容性的增强,CSS Grid 必将成为未来网页设计的关键技术之一。
166 1

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问