Question

我正在尝试更改下面的CSS，以便我不需要JavaScript代码段来实现相同的预期效果。

JavaScript：

<script>
    $(function() {
        var pageCount = 2;
        var pageWidth = 450;
        $("#pages").css('width', window.innerWidth * pageCount);
        $(".page").css('margin-right', window.innerWidth - pageWidth);
    });
</script>

HTML：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #pages {
            position: absolute;
            top: 50%;
            height: 200px;
            width: 30000px;
            margin-top: -100px;
            left: 50%;
        }

        .page {
            margin-left: -150px;
            width: 300px;
            background: blue;
            float: left;
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div id="pages">
        <div class="page">
            <h1>Page 1</h1>
            <p>This is the first page</p>
        </div>
        <div class="page">
            <h1>Page 2</h1>
            <p>This is the second page</p>
        </div>
        <div class="page">
            <h1>Page 3</h1>
            <p>This is the third page</p>
        </div>
    </div>
</body>
</html>

有什么办法可以删除这个JavaScript，只在CSS中做同样的事情吗？最初我尝试使用margin-right: 100%，但无法使用它。

密码笔：http://codepen.io/anon/pen/gfxeh

Answer 1

是。您可以使用以下CSS：

.page {
    counter-increment:section;
    margin-left: -150px;
    width: 300px;
    background: blue;
    float: left;
    margin-right: calc(100%/3 - 300px);
}

#pages {
    position: absolute;
    top: 50%;
    height: 200px;
    margin-top: -100px;
    left: 50%;
    width: calc(100%*3);
}

Answer 2

替代解决方案适用于任意数量的页面并与旧版浏览器兼容（calc是一种新的CSS功能）

但有一个限制：滚动条位于pages元素中。（有一种方法可以解决这个问题，我将在下面展示）

HTML

<div id="pages">
    <div class="page">
      <div class="content">
            <h1>Page 1</h1>
            <p>This is the first page</p>
      </div>
    </div>
    <div class="page">
        <div class="content">
            <h1>Page 2</h1>
            <p>This is the second page</p>
        </div>
    </div>
    <div class="page">
        <div class="content">
            <h1>Page 3</h1>
            <p>This is the third page</p>
        </div>
    </div>
</div>

CSS

#pages {
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
}

.page {
    width: 100%;
    display: inline-block;
}

.page > .content {
    width: 300px;
    background: blue;
    margin: 0 auto;
}

See Code Pen

如果您的网页只包含轮播，则可以将#pages替换为body，以便滚动条为主滚动条< / p>

See Code Pen

顺便说一句，标记解决方案中的CSS无效。它应该是

.page {
    ...
    margin-right: calc(100%/3 - 300px);
}

Code Pen for the correction

CSS只有旋转木马

2 个答案: