CSS布局——左定宽度右自适应宽度并且等高布局

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题,需要解决,花了点时间写了几个DEMO,放上来与大家分享受。那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧:

  1. 左侧固定宽,右侧自适应屏幕宽;
  2. 左右两列,等高布局;
  3. 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高)
  4. 要求不用JS或CSS行为实现;

仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样。但是你仔细看后你会觉得不是那么回事:

  1. 左边固定,右边自适应布局,这个第一点应该来说是非常的容易,实现的方法也是相当的多,那么就可以说第一条要求已不是什么要求了;
  2. 左右两列等高布局,这一点相对来说要复杂一些,不过你要是了解了怎么实现等高布局,那么也是不难。我个人认为这个考题关键之处就在考这里,考你如何实现等高布局;所以这一点你需要整明白如何实现;
  3. 至于第三条要求,应该来说是很方面的,我们随处都可以看到实现最小高度的代码;
  4. 第四条这个要求我想是考官想让我们面试的人不能使用js来实现等高布局和最小高度的功能。

上面简单的分析了一下实现过程,那么最终关键之处应该是就是“让你的代码要能同时实现两点,其一就是左边固定,右边自适应的布局;其二就是实现两列等高的布局”,如果这两个功能完成,那么你也就可以交作业了。那么下面我们就先来看看这两 点是如合实现:

一、两列布局:左边固定宽度,右边自适应宽度

这样的布局,其实不是难点,我想很多同学都有实现过,那么我就在此稍微介绍两种常用的方法:

方法一:浮动布局

这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果

HTML Markup

		<div id="left">Left sidebar</div>
		<div id="content">Main Content</div>
	

CSS Code

		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}

			#left {
				float: left;
				width: 220px;
				background-color: green;
			}

			#content {
				background-color: orange;
				margin-left: 220px;/*==等于左边栏宽度==*/
			}
		</style>
	

上面这种实现方法最关键之处就是自适应宽度一栏“div#content”的“margin-left”值要等于固定宽度一栏的宽度值,大家可以点击查看上面代码的DEMO

方法二:浮动和负边距实现

这个方法采用的是浮动和负边距来实现左边固定宽度右边自适应宽度的布局效果,大家可以仔细对比一下上面那种实现方法,看看两者有什么区别:

HTML Markup

		<div id="left">
			Left Sidebar
		</div>
		<div id="content">
			<d
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/two-cloumn-width-one-fixed-width-one-fluid-width

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部