HTML + CSS: горизонтальные полосы прокрутки? - PullRequest
Новая
       9

HTML + CSS: горизонтальные полосы прокрутки?

5 голосов
/ 30 апреля 2011

действительно простая разметка: 

<div id="page-wrap">

    <div class="post horizontal">

        <h2>Headline 01</h2>

        <div class="entry">
            <p>Lorem ipsum dolor...</p>
<p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
<p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
<p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
        </div>
    </div>

    <div class="post horizontal">

        <h2>Headline 02</h2>

        <div class="entry">
            <p>Lorem ipsum dolor...</p>
            <p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
            <p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
            <p class="image"><img class="alignnone" src="some.jpg" alt="" width="1024" height="768"></p>
        </div>
    </div>

</div>

мой css выглядит так: 

.horizontal {
    overflow-x:scroll;
    clear:both;
}

.horizontal p {
    float:left;
    width:500px;
    padding:0 20px 20px 0;
}

.horizontal p.image {
    width:1024px;
}

Я понятия не имею, как я могу создавать горизонтальные "кадры", такие как макет ниже, без использования реальных кадров.

Прямо сейчас изображения не плавают, потому что с .horizontal на 100% внутри # page-wrap. Таким образом, они выровнены друг под другом. Я хочу, чтобы все изображения были рядом в горизонтали. Каждая полоса должна иметь отдельную полосу прокрутки, которая позволяет мне прокручивать изображения.

Я хочу создать это:

http://i.stack.imgur.com/p2Vfk.png

Есть идеи, как это решить?

Более того, у меня есть еще несколько вещей, которые я не знаю, как решить ... например, полосы прокрутки или каждый горизонтальный горизонталь должны появляться только в том случае, если есть фактический контент, который необходимо прокрутить (если изображений нет, полоса прокрутки там быть не должна)

спасибо за вашу помощь

кстати. Я использую jquery в своем проекте, это возможно только с js?

Ответы [ 2 ]

2 голосов
/ 01 мая 2011

Из макета, который вы опубликовали, я получаю следующее:

  1. Даже если у разметки есть каждое изображение в своем собственном абзаце, вы хотите, чтобы они отображались inline , внутри той же строки.

  2. Вы хотите, чтобы этот контейнер имел горизонтальную полосу прокрутки .

  3. Изображенияследует использовать указанную полосу прокрутки, не перенося на несколько строк, когда их общая ширина становится больше ширины контейнера.

Такой макет может быть реализован с использованием CSS, напримерthis: 

.horizontal p.image {
    display: inline;         /* 1 */
}

.entry {
    overflow-x: scroll;      /* 2 */
    white-space: nowrap;     /* 3 */
}

Вот демонстрация с использованием вышеуказанного CSS с вашей разметкой (ограничения ширины / высоты на изображениях пропущены для лучшего отображения в небольшом окне): http://jsfiddle.net/TT9hq/

Replaceoverflow-x: scroll с overflow-x: auto, если полоса прокрутки отображается только в том случае, если (достаточно широких) изображений требуется полоса прокрутки.

0 голосов
/ 30 апреля 2011

Во-первых, не оборачивайте ваши изображения в p, если вы хотите, чтобы все они были в одной строке, попробуйте поместить их в промежутки.Или не помещайте их во что-либо и устанавливайте стиль display:inline на них.Что касается вашей проблемы с прокруткой, просто установите overflow-x: auto для этого контейнера div вместо overflow-x:scroll

РЕДАКТИРОВАТЬ: Если вы должны держать их в p с, поставьте display:inline на p s,

...