CSS / HTML，寻呼机，动态页面

Question

这是一个寻呼机实现：

.page
{
    display: inline-block;
    padding: 10px;
    background-color: aquamarine;
}

<div style="display: table;">
    <div style="display: table-cell; padding: 10px; background-color: green; width: 1%;">left</div>
    <div style="display: table-cell; padding: 10px; background-color: yellow; width: 98%; text-align: center;">
        <div class="page">1</div>
        <div class="page">2</div>
        <div class="page">3</div>
        <div class="page">4</div>
        <div class="page">5</div>
        <div class="page">6</div>
        <div class="page">7</div>
        <div class="page">8</div>
        <div class="page">9</div>
        <div class="page">10</div>
    </div>
    <div style="display: table-cell; padding: 10px; background-color: red; width: 1%;">right</div>
</div>

http://jsfiddle.net/QcQYW/

这是好的时候（因为有足够的空间）：

这是不好的（页面太多，或者屏幕不够宽）：

相反，我想实现以下目标：

因此将隐藏不可见的页面，并且应显示另一个div（带点）。最好的是没有jQuery，但如果是这样，我不介意

Answer 1

<div style="display: table;">
    <div style="display: table-cell; padding: 10px; background-color: green; width: 1%;">left</div>
    <div id="pageOuter" style="display: table-cell; padding: 10px; background-color: yellow; width: 98%; text-align: center;">
        <div class="page">1</div>
        <div class="page">2</div>
        <div class="page">3</div>
        <div class="page">4</div>
        <div class="page">5</div>
        <div class="page">6</div>
        <div class="page">7</div>
        <div class="page">8</div>
        <div class="page">9</div>
        <div class="page">10</div>
    </div>
    <div style="display: table-cell; padding: 10px; background-color: red; width: 1%;">right</div>
</div>  





    <script>
    var countPages = $("#pageOuter").length;
    if(countPages>10)
    {
        $("#pageOuter:nth-child(1)").css(//Your own CSS for DOTS with important parameter//);
        $("#pageOuter:nth-child(2)").css(//Your own CSS for DOTS with important parameter//);
        $("#pageOuter:nth-child(9)").css(//Your own CSS for DOTS with important parameter//);
        $("#pageOuter:nth-child(10)").css(//Your own CSS for DOTS with important parameter//);
    }
    </script>

这里检查页数，如果大于10，则1,2,9,10使用Jacascript通过CSS给出点数

Answer 2

我相信您正在寻找响应式设计。

浏览本网站：

http://skimbox.co/blog/responsive-pagination-with-kaminari

这部分对您有用：

@media screen (max-width: 900px) {
    .pagination .page.away-4 {
        display:none;
    }
}
@media screen  (max-width: 825px) {
    .pagination .page.away-3 {
        display:none;
    }
}
@media screen (max-width: 750px) {
    .pagination .page.away-2 {
        display:none;
    }
}

Answer 3

假设儿童div的固定数量：

basic demo to get u started（根据您的需要调整媒体widtha ）

.page {
    display: inline-block;
    padding: 10px;
    background-color: aquamarine;
}
.dot {
    display:none;
}
@media only screen and (min-width: 301px) and (max-width: 600px) {
    body {
        margin:0;
        padding:0;
    }
    .dot {
        display:inline-block;
    }
    .page:nth-child(2), .page:nth-child(11) {
        display:none;
    }
}

@media only screen and (max-width: 500px) {
    body {
        margin:0;
        padding:0;
    }
    .dot {
        display:inline-block;
    }
    .page:nth-child(2), .page:nth-child(3), .page:nth-child(10), .page:nth-child(11) {
        display:none;
    }
}