两列自适应布局及三列自适应布局

最新推荐文章于 2022-08-18 09:49:53 发布

weixin_流年

最新推荐文章于 2022-08-18 09:49:53 发布

阅读量609

点赞数

分类专栏： html5 文章标签： html html5 前端

本文链接：https://blog.csdn.net/weixin_40967353/article/details/108334784

版权

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端开发页面布局中，常见的页面布局方式有，比如两列布局，左边固定宽度，右边自适应宽度。以及三列布局的时候，两边固定宽度，中间宽度自适应。这样的需求实现方式也很简单，下面介绍一种比较简单的方法。

两栏布局，左边固定宽度，右边宽度自适应。

<body>
	<div class="left"></div>
	<div class="right"></div>
</body>

        html,body{
			margin: 0;
			padding: 0;
		}
		.left{
			width: 200px;
			height: 300px;
			background-color: red;
			float: left;
		}
		.right{
			height: 300px;
			background: yellow;
			overflow: hidden;
		}

三栏布局，左右两侧固定宽度，中间宽度自适应。

<body>
	<div class="left"></div>
	<div class="right"></div>
	<div class="main"></div>
</body>

        html,body{
			margin: 0;
			padding: 0;
		}
		.left{
			width: 200px;
			height: 300px;
			background-color: red;
			float: left;
		}
		.right{
			height: 300px;
			float: right;
			width: 200px;
			background: green;
		}
		.main{
			height: 300px;
			background-color: pink;
			overflow: hidden;
		}

欢迎转载！

weixin_流年

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
两列自适应布局及三列自适应布局

前端开发页面布局中，常见的页面布局方式有，比如两列布局，左边固定宽度，右边自适应宽度。以及三列布局的时候，两边固定宽度，中间宽度自适应。这样的需求实现方式也很简单，下面介绍一种比较简单的方法。两栏布局，左边固定宽度，右边宽度自适应。<body> <div class="left"></div> <div class="right"></div></body> html,body{ margin:
复制链接

扫一扫