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

一种方法不是浮动timeline元素只需为margin-left的宽度设置mini-timeline：

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

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

Answer 2

试试这个：

.timeline {
    background: #232323;
    height: 200px;
    width: 100%;
    display: inline-block;
    position: absolute;
}

宽度：部分屏幕为100％？

2 个答案: