Как сделать так, чтобы содержимое тела переливалось только по горизонтали? - PullRequest
Новая
       10

Как сделать так, чтобы содержимое тела переливалось только по горизонтали?

3 голосов
/ 01 августа 2011

Я пытаюсь создать переполнение страницы по горизонтали, а не по вертикали, поэтому, если содержимое не помещается в окне страницы, я бы хотел, чтобы его можно было прокручивать только через панель overflow-x, сохраняя при этом страницу фиксированной высоты. , Идея состоит в том, чтобы заставить его «расти» горизонтально - так вправо. Может ли это быть сделано в идеале с CSS?

Любая помощь будет оценена! :)

Спасибо и береги себя, С уважением, Петр.

Ответы [ 4 ]

5 голосов
/ 01 августа 2011

Вот решение :).Это не требует установки фиксированной ширины, но вы все равно должны контролировать высоту вашего контента.А в работе вы, скорее всего, захотите добавить внутренние контейнеры и добавить некоторые настройки, чтобы они работали в IE.

Скрипка: http://jsfiddle.net/AWq39/7/.

<body>
    <div class="page-container">...</div>
    <div class="page-container">...</div>
    <div class="page-container">...</div>
</body>

html, body{
    height: 100%;
    padding: 0;
    margin: 0;
    white-space: nowrap;
    font-size: 0;
}
.page-container{
    display: inline-block;
    height: 100%;
    max-width: 700px;
    padding: 0 2em;
    font-size: 14px;
    white-space: normal;
    overflow: hidden;
    vertical-align:top;
}
1 голос
/ 05 июня 2018

Вы можете заставить его расти автоматически. Вместо заданной ширины, т. Е. width: 6000px;, вы можете использовать width: max-content;, и она автоматически масштабируется, чтобы соответствовать вашему контенту по горизонтали. 

height:100%;
width: max-content;
overflow-y:hidden; #optional if you want to lock down height.
0 голосов
/ 01 августа 2011 
height:100%;
width:auto;
overflow:hidden

Это должно сработать. Просто убедитесь, что ваш контент не становится больше ширины страницы, иначе он будет обрезан. Это можно исправить с помощью javascript, создав новый столбец, когда длина содержимого превышает высоту.

ОК, width: auto не работает с плавающими элементами внутри ... если используется javascript (jquery), который тоже можно исправить. демо: http://jsfiddle.net/Q3dC5/

0 голосов
/ 01 августа 2011

Он не будет автоматически расти горизонтально, но вы можете легко настроить горизонтальную прокрутку, если этого требует ваш контент.Вы должны установить фиксированную ширину, чтобы приспособить для содержания.Пример: исправлено height:100%;, исправлено width:6000px; и overflow-y:hidden; overflow-x:scroll;, что, к сожалению, не полностью совместимо со всеми браузерами.

...