我正在尝试构建一个包含 3 列的网页。中间(居中)的一个需要有固定宽度(1000px),另外两个没有特定宽度。当用户调整窗口大小时,只应调整左侧窗口和右侧窗口的大小。这可能吗?
问候
最佳答案
是的,这是可能的
你应该在你的 css 中创建一个 maindiv 并将背景设置为在你的 body 中重复,如下所示,并给它一个背景颜色/渐变/任何你喜欢的。我一般用1px宽度的渐变图片。
在你的 div 中设置与你 body 中相同的背景颜色和图像将帮助你根据你的设计保持均匀的背景(即你的设计在底部有 20 像素的边距以创建一个清晰的空间,然后背景将跟随而不是显示白色)
样式表.CSS
body {
margin: 0px;
background-position: 0px 0px;
background-repeat: repeat-x;
background-color: #03255d;
background-image: url(../img/bg_gradient.gif);
}
#MainDiv {
position: absolute;
width: 1000px; /* width of middle column */
z-index: 1;
top: 0%;
left: 50%;
margin-left: -500px; /* should be half and minus of width to center it */
background-color: #03255d; /* set background color same as body */
background-image: url(../img/bg_gradient.gif); /* set background image same as body */
}
现在在您的 HTML 中,在 body 标记之后以 MainDiv 开始,在 body 结束标记之前关闭 MainDiv
索引.HTML
<body>
<div id="MainDiv">
Your HTML here
</div>
</body>
现在,当您调整浏览器大小时,它会调整背景大小并且您的中间列保持居中
关于css - 3列div css,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8719596/