html - 带有扩展水平背景的左侧边栏？

Question

是否可以有一个侧边栏仅通过背景图像/颜色连接到浏览器的左侧，但是，无论浏览器的大小如何，其中的内容都保持在右侧并且与其他内容的距离相同并且两者内容 block 居中？

我想也许是百分比，但它与导致问题的右侧列的关系..

Answer 1

您可以使用长边框和负边距来实现这一点。

http://jsfiddle.net/davidja/TWdXe/2/

.outer {
    height:200px;
    position:relative;
    width:650px;       // make your fixed container
    margin-left:auto;  // center it
    margin-right:auto; // center it
}
.inner {
    height:200px;
    background:red;
    width:200px;
    display:inline-block;
    border-left: solid 1000px red; // long border on the left  
     margin-left: -1000px;         // negative margin to keep the layout 
}
.foo {
    width:400px;
    background:orange;
    display:inline-block;
    border-right: solid 1000px orange; // long border on the right - optional
    margin-right: -1000px;             // negative margin to keep the layout -  optional 
}


body {overflow:hidden;}  //Resolves horizontal scrollbar