css - 宽度:部分屏幕上的 100%？

Question

我有一个难题:我需要你在右下角看到的最深的灰色条(在本地打开下面的代码之后)跨越浏览器窗口允许的尽可能多的空间而不跨越我拥有的浅灰色部分设置在左边。这是我的代码:

<div class="timeline-section">
    <div class="timeline-wrapper">
       <div class="mini-timline"></div>
       <div class="timeline"></div>
       <div class="clearfix"></div>
    </div>
</div>

CSS:

.clearfix { clear: both; }

.timeline-wrapper { position: relative; }

.timeline-section {
    background: #3d3d3d;
    bottom: 0px;
    height: 276px;
    left: 0px;
    width: 100%;
    position: absolute;
    padding: 0px;}

.mini-timline {
    background: #474747;
    margin: 0px;
    float: left;
    height: 276px;
    width: 500px;
    display: inline-block;}

.timeline {
    background: #232323;
    height: 200px;
    width: 60%;
    float: left;
    display: inline-block;
    position: relative;}

Answer 1

一种方法是不 float timeline元素。
只需为 mini-timeline 的宽度设置一个 margin-left:

.timeline {
    background: #232323;
    height: 200px;
    margin-left:500px;
    position: relative;
    color:#FFF;
}

http://jsfiddle.net/rLzAM/1/