css 根据不同屏幕设置间距_css实现屏幕自适应的布局效果，宽屏窄屏通用

原先的博客布局是固定宽度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%。

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