Горизонтальная страница контента Windows 8

Question

Горизонтальная страница контента Windows 8

0

Я люблю Windows 8, среди многих приложений, и один из моих любимых приложений - погода. Сегодня я хотел попробовать сделать "горизонтальное содержание страницы", как показано на приложении погоды на скриншоте ниже.

Я пытался сделать это с помощью DIV и не повезло. Я пробовал различные методы и все, что я пытался использовать в процентах, это не сработало. Я вернулся к использованию em с таблицами, и я получил эффект, который мне нужен, но теперь моя проблема заключается в том, чтобы div имел ширину не менее 90% на ширине страницы.

Любая помощь будет высоко оценена в отношении того, как этот эффект может быть достигнут.

Упрощенный код:

<!DOCTYPE html>
<html>
<head>
<title>Win 8 Horizontal Content Experiment</title>
<meta charset='utf-8'>
<meta content='width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=1.0' name='viewport'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css'>
<script src='http://code.jquery.com/jquery-1.9.1.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js' type='text/javascript'></script>
<style type="text/css">
body {
    background: #000;
}

#contain {
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
}

#contain table {
    height: 100%;
}

#contain td {
    width: 100%;
    height: 100%;
    border: 0px;
    padding: 0px;
    margin: 0px;
}

/* Separate DIVS Inside Container */
#contain .box {
    display: inline-block;
    width: 80em;
    height: 100%;
    background: red;
    color: #700;
}
</style>
</head>
<body>
    <div id="contain">
        <table>
            <tr>
                <td>
                    <div class="box">
                        <center><h1>Page 1</h1></center>
                    </div>
                </td>
                <td>
                    <div class="box">
                        <center><h1>Page 2</h1></center>
                    </div>
                </td>
                <td>
                    <div class="box">
                        <center><h1>Page 3</h1></center>
                    </div>
                </td>
                <td>
                    <div class="box">
                        <center><h1>Page 4</h1></center>
                    </div>
                </td>
                <td>
                    <div class="box">
                        <center><h1>Page 5</h1></center>
                    </div>
                </td>
                <td>
                    <div class="box">
                        <center><h1>Page 6</h1></center>
                    </div>
                </td>
            </tr>
        </table>
    </div>

<script type="text/javascript">
(function() {
    function scrollMenu(e) {
        e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
        document.getElementById('contain').scrollLeft -= (delta*40); // Multiplied by 40
        e.preventDefault();
    }
    if (document.getElementById('contain').addEventListener) {
        // IE9, Chrome, Safari, Opera
        document.getElementById('contain').addEventListener("mousewheel", scrollMenu, false);
        // Firefox
        document.getElementById('contain').addEventListener("DOMMouseScroll", scrollMenu, false);
    } else {
        // IE 6/7/8
        document.getElementById('contain').attachEvent("onmousewheel", scrollMenu);
    }
})();
</script>
</body>
</html>

Michael Schwartz 18 сен. 2013, в 14:32

Источник

Теги:

javascript

html

css

css3

1 ответ

Ещё вопросы

bejank · Accepted Answer · 2013-09-20T02-21-00.000Z

Не используйте таблицы. Используйте inline-block с width: 100% и height: 100% внутри div с position: relative, white-space: nowrap (это будет держать поля в одной строке) и width:100% и height:100%. Убедитесь, что вы определяете html, body {width: 100%; height: 100%} html, body {width: 100%; height: 100%} в ваших стилях. Я создал jsfiddle с тем, что, как я думаю, вы хотели сделать.

http://jsfiddle.net/taW4T/2/

Если вы хотите сделать ширину 90%, вы можете просто установить ширину .box на 90%, что я и сделал в jsfiddle. Вы должны держаться подальше от таблиц, потому что они добавляют много ненужной разметки.