最新消息:yaf表单扩展中新增加了浮点数、日期和集合的校验。php yaf框架扩展实践三——表单

css实现屏幕自适应的布局效果,宽屏窄屏通用

编程开发 3716浏览 0评论

原先的博客布局是固定宽度1000px,这个在比较大的屏幕上(比如1440*900),显示就是中间一块,感觉不是很好看,于是就琢磨着改成自动适应屏幕的效果,在比较宽的屏幕上也能满屏显示。

折腾了几天总算折腾出来了,预览地址:http://www.01happy.com/demo/css-adapt-to-the-screen/,可以自由缩放浏览器大小试试。代码如下:


<!DOCTYPE HTML>
<html>
<meta charset="UTF-8" />
<title>css实现屏幕自适应的布局效果</title>
<style>
.container {
	position: relative;
	min-width: 960px;
}
.left {
	width: 120px;
	position: absolute;
	left: 0px;
	top: 0px;
}
.main {
	padding: 20px;
	margin: 0 340px 0 140px;
}
.main * {
	max-width: 100%;
}
.right {
	width: 320px;
	position: absolute;
	right: 0px;
	top: 0px;
}

/*
	辅助代码,只是预览时效果更好些
*/
.container div {
	border: 1px solid #ccc;
}
.main_content {
	width: 1000px;
	background: #ccc;
}

</style>
<body>
<div class="container">
  <div class="left">left</div>
  <div class="main"> main
    <div class="main_content">main_content</div>
  </div>
  <div class="right">right</div>
</div>
</body>
</html>

主要思路:

  • 左栏和右栏固定宽度,采用absolute布局。这个两个边栏就固定下来。
  • 中间一栏设定margin值,左间距和右间距分别对应左右边栏,当然也可以更宽下。
  • 为了防止中间栏内的元素超出中间栏,需要设定max-width为100%。

如果有什么问题,可以和我联系。

转载请注明:快乐编程 » css实现屏幕自适应的布局效果,宽屏窄屏通用

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址