【前端攻城狮之路】CSS两列布局——右侧固定宽度、左侧自适应

做了一道猫厂很经典的前端笔试题,解决了一直以来在两列布局的认识上思考太少的毛病。


题目要求是右侧aside固定宽度200px,左侧content自适应。

本来直接用float,发现aside总是会被“挤”到content以下、footer以上的位置,debug了好久最终还是看了大牛的博客才意识到这个问题所在。


基本思路是

①content宽度不设,让它默认auto,设一下高度(好看)

②aisde在右边那就 float:right ,设置固定宽度200px

③重点!!给content设置aside方向(本题右)上的maigin,且margin值要足够放下aside

④超重点,也是坑人的地方!!!把body中代表aside的div提到content这个div的前面,这样浏览器渲染content的时候它就正好“叠”到了aside的左边距上,完美并排!


效果图

【前端攻城狮之路】CSS两列布局——右侧固定宽度、左侧自适应_第1张图片


实现代码

(不同屏幕不同浏览器效果不同,未做多浏览器兼容,仅供参考思路)

body{
	margin: 0;
	padding: 0 5px;
}
#header{
	width: 100%;
	height: 18%;
	border: green 1px solid;
	margin-bottom: 1%;
	}
#logo{
	width: 80px;
	height: 80px;
	border: red 1px solid;
	float: left;
	margin-top: 20px;
	margin-left: 20px;
}
#username{
	width: 200px;
	height: 30px;
	border: black 1px solid;
	float: right;
	margin-top: 75px;
	margin-right: 20px;
	text-align: right;
}

#main{
	overflow: hidden;
}
#content{
	height: 430px;
	border: blue 1px solid;
	margin-right: 240px;
}
#aside{
	width: 200px;
	height: 30px;
	border: red 1px solid;
	float: right;
}

#footer{
	width: 100%;
	height: 9%;
	border: black 1px solid;
	clear: both;
	margin-top: 1%;
}


	两列布局--右侧定宽左侧自适应




	
	
aside-固定宽度200px
content-宽度自适应


你可能感兴趣的:(CSS)