Question

我希望修复第一个和最后一个div，当我尝试滚动此示例jsfiddle example here时就像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/

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

2 个答案:

解决方案1：

解决方案2：