CSS两列布局_html/css_WEB-ITnose-html教程-PHP中文网

CSS两列布局_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:43:28

原创

1297人浏览过

在布局中，我们常常需要出现两列的情况，其中左边一列固定宽度，右边一列随着浏览器宽度变化而变化。如何实现呢？

传统的方法是利用float将左部分浮动起来，再通过margin将右部分右移，得到所需效果，代码如下：

立即学习“前端免费学习笔记（深入）”；

SEEK.ai

AI驱动的智能数据解决方案，询问您的任何数据并立即获得答案

100

查看详情

		<!--两列布局，其中左侧固定，右侧自适应-->		<div class="left background-color-red height-60 width-300"></div>		<div class=" background-color-black height-60 margin-left-301 "></div>

登录后复制

css代码如下：

立即学习“前端免费学习笔记（深入）”；

.color-blue {	color:blue;}.color-yellow {	color:yellow;}.background-color-blue {	background-color: blue;}.background-color-black {	background-color:black;}.background-color-red {	background-color:red;}.background-color-yellow {	background-color:yellow;}.height-60 {	height:60px;}.border-color-red {	border: 2px solid #ff0000;}.left {	float:left;}.right {	float:right;}.font-size-20{	font-size: 20px;}.line-height-1_5{	line-height: 1.5;}.width-1 {	width:100%;}.width-auto {	width:auto;}.width-300 {	width:300px;}.width-960 {	width:960px;	}.width-100 {	width:100%;}.inline-block {	display: inline-block;}/*第一种水平居中方式*/.center-1 {	margin: 0 auto;}/*第二种水平居中方式*/.center-2 {	position:absolute;	left:50%;	margin-left:-480px;}.margin-left-301 {	margin-left:301px;}

登录后复制

这样就可以得到所想要的效果，如图：

立即学习“前端免费学习笔记（深入）”；

在CSS3推出的盒布局中，可以使用更加简便的方法来更加灵活的控制这样的布局需求，就是利用了box-flex属性，代码如下：

立即学习“前端免费学习笔记（深入）”；

		<!--两列布局，其中左侧固定，右侧自适应-->		<div class="box"><!--盒布局-->			<div class="background-color-black height-60 width-300"></div>			<div class="background-color-red height-60 flex"></div>		</div>

登录后复制

其中css代码如下：

立即学习“前端免费学习笔记（深入）”；

.box {	display: box;	display: -webkit-box;}.flex {	-webkit-box-flex: 1;}

登录后复制

该程序完整代码位置： http://runjs.cn/code/xyhyg7tv

立即学习“前端免费学习笔记（深入）”；

大家都在看：

pc如何制作html_PC端HTML页面（响应式布局）制作方法如何制作横向滚动条美化效果_html横向滚动条美化实现教程如何使用HTML构建电商产品页面的详细步骤 Typora自定义CSS，HTML学习文档颜值爆表！免费HTML工具手机入口 HTML工具手机在线编辑