Question

我花了很多时间试图弄清楚如何创建类似to this的布局，其中页面内容受容器元素宽度的约束，但左边的列有一个背景，延伸到用户屏幕的最左侧（示例中为黄色）。

我正在尝试使用Bootstrap执行此操作，但似乎不可能，因为容器元素包含页面的内容以及它的背景。

这是迄今为止我所拥有的JSFiddle。

结构的一些示例代码：

<div class="row">
    <div class="container">
        <div class="col-xs-6 left-one">
            This one's background needs to stretch to the far left, on large screens.
        </div>
        <div class="col-xs-6 right-one">
            This one's background can be that of the body
        </div>
    </div>
</div>

<div class="some-content">
    <div class="container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos minima laudantium, id a, porro aliquid expedita. Iste beatae provident architecto dolorum aspernatur maiores, ratione deserunt nesciunt magni unde repudiandae eaque.
    </div>
</div>

如果有人可以为我解开这个谜，真的很感激。

这是完整的代码：

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

body{
    background: #eee;
}

.left-one{
    background: yellow;
    height: 500px;
    padding-top: 20px;
}

.right-one{
    background: #eee;
    height: 500px;
    padding-top: 20px;
}

.some-content{
    background: lightslategray;
    padding: 20px 0;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="row">
    <div class="container">
        <div class="col-xs-6 left-one">
            This one's background needs to stretch to the far left, on large screens.
        </div>
        <div class="col-xs-6 right-one">
            This one's background can be that of the body
        </div>
    </div>
</div>

<div class="some-content">
    <div class="container">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos minima laudantium, id a, porro aliquid expedita. Iste beatae provident architecto dolorum aspernatur maiores, ratione deserunt nesciunt magni unde repudiandae eaque.
    </div>
</div>

Answer 1

做一下这个人在例子中所做的事情＆amp;使用before元素。

<强> DEMO

<强> CSS：

.left-one:before{
    background: yellow;
    bottom: 0;
    content: "";
    position: absolute;
    right: 100%;
    top: 0;
    width: 9999px;
}

如何创建一个背景延伸到屏幕最左侧而不是内容的列？

1 个答案: