原先的博客布局是固定宽度1000px,这个在比较大的屏幕上(比如1440*900),显示就是中间一块,感觉不是很好看,于是就琢磨着改成自动适应屏幕的效果,在比较宽的屏幕上也能满屏显示。
css实现屏幕自适应的布局效果.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;
}
left
main
main_content
right
主要思路:
左栏和右栏固定宽度,采用absolute布局。这个两个边栏就固定下来。
中间一栏设定margin值,左间距和右间距分别对应左右边栏,当然也可以更宽下。
为了防止中间栏内的元素超出中间栏,需要设定max-width为100%。
如果有什么问题,可以和我联系。