这篇文章给大家介绍的内容是关于css实现三栏布局的三种方式（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
浮动布局
分为三个div，另外一个父级包含这三个div，使用float，
注意点：三个div，left --> right ---> center 这种顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 300px;
height: 100px;
background-color: red;
}
.right {
float: right;
width: 300px;
height: 100px;
background-color: blue;
}
.center {
margin: 0px 300px 0px 300px;
background-color: black;
height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="left">1</div>
<div class="right">2</div>
<div class="center">3</div>
</div>
</body>
</html> Flex
设置中间盒子FLex：1，这样的话就可以实现自适应，默认水平排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.father {
display: flex;
}
.left {
width: 300px;
height: 100px;
background-color: red;
}
.center {
flex:1;
height: 100px;
background-color: black;
}
.right {
width: 300px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>flex相关知识点，一般会使用到的
1、设置display：flex
2、容器图：
轴：水平main axis和垂直cross axis
3、容器的属性
flex-direction：主轴的方向，row | row-reverse | column | column-reverse;
flex-wrap：换行， nowrap | wrap | wrap-reverse;
flex-flow：flex-direction和flex-wrap简写
justify-content：主轴上的对齐方式， flex-start | flex-end | center | space-between | space-around；
align-items：交叉轴上如何对齐，flex-start | flex-end | center | baseline | stretch;
绝对定位对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.one {
background-color: red;
position: absolute;
left: 0;
width: 300px;
height: 100px;
}
.two {
left: 300px;
right: 300px;
background-color: blue;
position: absolute;
height: 100px;
}
.three {
right: 0px;
width: 300px;
background-color: yellow;
position: absolute;
height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="one">1</div>
<div class="two">1</div>
<div class="three">1</div>
</div>
</body>
</html>相关文章推荐：
以上是css实现三栏布局的三种方式（附代码）的详细内容。更多信息请关注PHP中文网其他相关文章！
使您的第一个自定义苗条过渡Mar 15, 2025 am 11:08 AMSvelte Transition API提供了一种使组件输入或离开文档（包括自定义Svelte Transitions）时动画组件的方法。
让我们使用（x，x，x，x）来谈论特殊性Mar 24, 2025 am 10:37 AM前几天我只是和埃里克·迈耶（Eric Meyer）聊天，我想起了我成长时代的埃里克·迈耶（Eric Meyer）的故事。我写了一篇有关CSS特异性的博客文章，以及
您如何使用CSS创建文本效果，例如文本阴影和渐变？Mar 14, 2025 am 11:10 AM文章讨论了使用CSS来获得阴影和渐变等文本效果，优化它们以进行性能并增强用户体验。它还列出了初学者的资源。（159个字符）
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境
EditPlus 中文破解版
体积小，语法高亮，不支持代码提示功能
螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。
SublimeText3 Linux新版
SublimeText3 Linux最新版
mPDF
mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），
