修复第一个和最后一个 div css

Question

当我在此示例jsfiddle example here 上绑定 scrool 时，我想修复第一个和最后一个 div，就像在 this image 上一样。

我在平板电脑上试过，但它不工作

这里是css

.mother_div {
    display:block;
    height:auto;
    width:500px;
    border:1px solid #000;
    overflow-x:scroll;
}
.child_divs {
    height:40px;
    margin-bottom:1px;
    background:green;
    display:block;
    width:1000px;
}
.child_divs div {
    float:left;
    line-height:40px;
    color:#fff;
    font-size:15px;
    width:100px;
    text-align:center;
}
.child_divs div:first-child {
    background:#ccc;
    color:#000;
}
.child_divs div:last-child {
    background:#ccc;
    color:#000;
}

Answer 1

试试这个：

解决方案 1：

JSFiddle - DEMO

.child_divs div:first-child {
    position:fixed;
}
.child_divs div:last-child {
    position:fixed;
    left:409px;
}
.child_divs div:nth-child(2) {
    margin-left:100px;
}

解决方案 2：

JSFiddle - DEMO

.child_divs div:first-child {
    position: absolute;
    left: 1px;
}
.child_divs div:last-child {
    position: absolute;
    right: 1px;
}
.child_divs div:nth-child(2) {
    margin-left:100px;
}

Answer 2

这个怎么样？

.child_divs div:first-child {
    background:#ccc;
    color:#000;
    position: fixed;
    left: 0;
}

.child_divs div:first-child + div {margin-left: 100px;}
.child_divs div:last-child {
    background:#ccc;
    color:#000;
    position: fixed;
    right: 0;
}

http://jsfiddle.net/jy0hmh9g/4/