双栏布局

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

浮动布局

实现思路也非常的简单：

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

代码效果

没有使用bfc

使用了bfc

代码

 <!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布局

代码效果

代码

 <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

代码效果

代码

关键代码

 <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布局

代码效果

代码

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 2022-02-28 19:39 超级无敌美少男战士阅读(71) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· css 浮动清除浮动

· grid 布局 css

· css三栏布局

· 【转】104道 CSS 面试题，助你查漏补缺

· 三栏布局(三栏布局主要是前后两列定宽，中间自适应)

阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！

怪物奇妙物语

最新随笔

我的标签

积分与排名

随笔分类 (20)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

双栏布局

浮动布局

代码效果

代码

flex布局

代码效果

代码

三栏布局

两边float中间margin

代码效果

代码

flex布局

代码效果

代码

	<!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>

	<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>

	<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>

	<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>