css - 3列div css

标签 css html center resize

我正在尝试构建一个包含 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/

相关文章:

css - 中心 3 div 水平全屏

CSS 嵌套 :not() selector

javascript - 通过未创建的组件设置样式

javascript - [Vue 警告] : Error in created hook: "TypeError: Cannot set property of undefined"

css - 使用绝对定位使 div 居中

html - Safari 中的垂直居中

javascript - 在滚动条上翻译 div

javascript - 使用javascript对象的多级目录菜单

html - 如何在开发 FlexdashBoard 应用程序时在 renderUI 中结合数据表和 HTML?

javascript - 如何在 zepto 中实现类似 slideDown() 的 jquery