怪物奇妙物语

宇宙无敌超级美少男的怪物奇妙物语

首页 新随笔 联系 管理
  822 随笔 :: 0 文章 :: 2 评论 :: 16万 阅读

双栏布局

双栏布局非常常见,往往是以一个定宽栏和一个自适应的栏并排展示存在

浮动布局

实现思路也非常的简单:

  • 使用 float 左浮左边栏
  • 右边模块使用 margin-left 撑出内容块做内容展示
  • 为父级元素添加BFC,防止上方内容飞到下方元素

代码效果

没有使用bfc

image-20220217111608546

使用了bfc

image-20220217111621084

代码

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.box {
overflow: hidden;/* 父级元素添加BFC */
}
.left {
float: left;
width: 200px;
background-color: gray;
height: 400px;
}
.right {
margin-left: 210px;
background-color: lightgray;
height: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
左边左边左边左边左边左边左边左边左边左边左边左边左边左左边左边左边左边左左边左边左边左边左左边左边左边左边左左边左边左边左边左左边左边左..........
</div>
<div class="right">
右边右边右边右边右边右边右边右边右边右边右边右边边右边右边右边右右边右边右边右边右边右边右边右边边右边右边右边右右边右边右边右..........
</div>
</div>
</body>
</html>

flex布局

代码效果

image-20220217121514662

代码

<style>
.box {
display: flex;
}
.left {
width: 200px;
background-color: gray;
}
.right {
background-color: lightgray;
flex: 1;
}
</style>
<div class="box">
<div class="left">左边左边左边左边左边左边左边左边左边左边</div>
<div class="right">右边右边右边右边右边右边右边右边右边</div>
</div>

三栏布局

两边float中间margin

代码效果

image-20220217122019583

代码

关键代码

image-20220217122055064

<style>
.wrap {
background: #eee;
overflow: hidden;
padding: 20px;
height: 200px;
}
.left {
width: 200px;
height: 200px;
float: left;
background: coral;
}
.right {
width: 120px;
height: 200px;
float: right;
background: lightblue;
}
.middle {
margin-left: 220px;
height: 200px;
background: lightpink;
margin-right: 140px;
}
</style>
<div class="wrap">
<div class="left">左侧</div>
<div class="right">右侧</div>
<div class="middle">中间</div>
</div>

flex布局

代码效果

image-20220217134059727

代码

04_三栏布局_flex布局.html

<style type="text/css">
.wrap {
display: flex;
justify-content: space-between;
}
.left,
.right,
.middle {
height: 100px;
}
.left {
width: 200px;
background: coral;
}
.right {
width: 120px;
background: lightblue;
}
.middle {
background: #555;
width: 100%;
margin: 0 20px;
}
</style>
<div class="wrap">
<div class="left">左侧</div>
<div class="middle">中间</div>
<div class="right">右侧</div>
</div>
posted on   超级无敌美少男战士  阅读(71)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示