CSS 布局 - 具有 flex 背景的 3 列

标签 css fluid-layout

我正在构建一个 3 列的流体布局,并且已经完成了 90%。我想知道实现背景或侧边栏的最佳方式是什么 - 无论您想如何查看。

enter image description here

我有一个很好的 box hack,它以我的主要内容区域为中心,现在我需要实现你在两侧看到的两条条纹,它们在各自的内边框上有一个 1px 的小边框。

我可以创建一个 1px 高、1000 像素宽的条纹,但我觉得有更好的方法来做到这一点 - 可能使用纯 CSS?

我现在看到的是 5 列布局,还是仍然是三列流体?

如果有人能为这种布局风格(它可能是当今最常见的,是吧?)提供一个好的模式或链接,我真的很感激!

这是我当前的流体包装代码:

CSS:

body
    {
        margin: 10px 0px;
        padding: 0px;
        text-align: center;
    }
    #siteWrapper
    {
        width: 980px;
        margin: 0px auto;
        text-align: left;
        padding: 15px;
        background-color: #fff;
    }

HTML

<body>

<div id="siteWrapper">
</div>

</body>

最佳答案

body
{
    margin: 10px 0px;
    padding: 0px;
    text-align: center;
    background: whatevercolor;
}
 #siteWrapper
    {
        width: 980px;
        margin: 0px auto;
        text-align: left;
        padding: 15px;
        background-color: #fff;
        border-left: whatever;
        border-right: whatever;
    }

关于CSS 布局 - 具有 flex 背景的 3 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10254307/

相关文章:

javascript - 删除已经绘制的对象三

html - 使用首选项(不是 CSS 或 JS)关闭 WebKit 大纲

html - 如何使元素宽度为 : 100% minus padding?

CSS 流体布局 : margin-top based on percentage grows when container width increases

css - 流体高度 div 包括边距

CSS 右边固定宽度,左边流动,右边div在html中排在第一位。我如何避免崩溃

html - 使用 Bootstrap 从 3x2(桌面)到 2x3(移动)布局

html - 如何将 2 个 div 从左右分开?

css - 改变网页的主题颜色

html - 如何让 child 仅使用 CSS 自动适应 parent 的宽度?