Вопрос по css, css3 – Многоколоночная проблема с горизонтальной прокруткой

9

У меня есть родительский div (основной) с горизонтальным переполнением, установленным на auto. Затем у меня есть дочерний элемент (столбцы), в котором есть все свойства моего столбца. Проблема в том, что как только содержимое выходит за пределы области просмотра, я больше не могу управлять правыми полями или отступами, так как столбец, кажется, идет только до области просмотра. Например, когда я помещаю цвет фона на «столбцы» фон идет только до края области просмотра, даже если содержимое прокручивается дальше.

.main {
    overflow-x: visible;
    overflow-y: hidden;
    width: 100%;
}
.columns {
    background: red;
    column-fill: auto;
    column-width: 670px;
    column-gap: 80px;
    height: 120px;
    padding: 20px;
    width: auto;
}

<div class="main">
     <div class="columns">
           <p></p>
           <p></p>
           <p></p>
           <p></p>
           <p></p>
     </div>
</div>

Вот пример:http://jsfiddle.net/fyG24/

Добро пожаловать в переполнение стека! Я надеюсь, что мой ответ окажется полезным. Не забывайте, если мой ответ полезен, проголосуйте за него. Если это решит вашу проблему, установите флажок & quot; принять & quot; Это. ScottS
И, не забывайте, вы можете проголосовать столько раз, сколько захотите, но вы можете принять только один. Оба действия повышают репутацию человека. Jeremy Goodell

Ваш Ответ

2   ответа
5

New Answer: Use Pseudo-Elements to Help

Основываясь на ваших комментариях, вотновая скрипка что я считаю, отвечает вашим желаниям. Добавляет дополнительныйdiv упаковка.columns Я пометил.scrollerи следующий css:

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;    
}
.main {
    background: yellow;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
}

.main:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 120px; /* match columns */
    background: red;
    z-index: 0;
}

.scroller {
    overflow-y: hidden;
    overflow-x: auto;
    height: 100%;
    position: relative;
    z-index: 1;
}


.columns {
    -webkit-column-fill: auto;
    -webkit-column-width: 300px;
    -webkit-column-gap: 40px;
    -moz-column-fill: auto;
    -moz-column-width: 300px;
    -moz-column-gap: 40px;
    height: 120px;
    padding: 0 20px;
    text-align: justify;
    width: auto;
}


.columns > p:last-of-type:after {
    content: '';
    display: block;
    width: 20px;
    height: 1px;
    float: right;
    margin-right: -20px;
    margin-top: -1px;
}

Я использую псевдоэлемент в.main дать фон для.columns установите явную высоту, которую вы намереваетесь для них, затем я также использую другой псевдоэлемент в последнемp заставить рендеринг последних 20px столбца. Он должен работать независимо от того, сколько времени или какой части он занимает, и наheight: 1px а такжеmargin-top: -1px он не должен генерировать новый столбец, если он попадает прямо в конец столбца текста.

Original Answer: Move Overflow and Set a Right Margin

Чтобы получитьbackground Для перевода необходимо изменить некоторые CSS, а именно:

.main {
    overflow: hidden;
    width: 100%;
}

.columns {
    overflow-x: auto;
}

Это, кажется, потому что.column фон ограничен100% ширина на.main который контролирует горизонтальную полосу прокрутки в вашем исходном коде. Делая.main чисто скрытый, затем настройкаoverflow-x: auto на.columns, прокрутка теперь контролируется.columns div, и позволяет егоbackground чтобы увидеть.

Чтобы исправить отсутствие отступов на правой стороне, единственное, что я мог придумать, это добавить следующее:

.columns > p:last-of-type {
    margin-right: 20px;
}

Это ставит правильный край на последнийp элемент непосредственных детей.columns который затем дал взгляд, я полагаю, вы собираетесь.

Здесь & APOS; sмодифицированная скрипка (проверено только в Firefox).

да, весь контент содержится в .columns. Однако я не всегда хочу, чтобы содержимое занимало всю высоту области просмотра в зависимости от моего текущего размера сетки при определенном разрешении. Поэтому я установил фиксированную высоту на .columns, которая не позволяет мне прикрепить полосу прокрутки к нижней части области просмотра. Drastick
Мне действительно нужен был только последний бит, и я немного его изменил (не нуждался в ширине или отображении) и добавил его в .columns: after, а не в p: after, и, похоже, он работает нормально. Это странная вещь для добавления отступов, но это работает. Благодарю..columns:after { content: ''; height: 1px; float: right; margin-right: -120px; margin-top: -1px; } Drastick
@ Майк - ладно, я обновился с новым ответом, который, я думаю, отвечает твоим желаниям.
@ Майк - весь ваш потенциальный контент содержится в.columns или это просто внутри.main или даже снаружи.main?
Думаю, мне следовало быть более конкретным в моем примере. Я не могу добавить переполнение к столбцам, потому что оно не всегда такое же высокое, как окно просмотра, и мне нужна полоса прокрутки, чтобы всегда быть внизу. В зависимости от разрешения экрана я отображаю различные объемы содержимого, которое необходимо содержать, поэтому у меня установлен дополнительный родительский элемент с переполнением. Также я не могу поставить отступ на последнем p, потому что он не всегда всего один p. В последнем столбце может быть более одного p. Drastick
0

просто поделив столбцы css следующим образом:

.columns {
    -webkit-column-fill: auto;
    -webkit-column-width: 300px;
    -webkit-column-gap: 40px;
    -moz-column-fill: auto;
    -moz-column-width: 300px;
    -moz-column-gap: 40px;
    height: 120px;
}
.columns p {
    background: red;
    height: 120px;
    padding: 0 20px;
    text-align: justify;
    width: auto;
}
Это добавляет заполнение к каждому тегу p, что, в свою очередь, увеличивает ширину каждого столбца. Я также не могу просто добавить его к последнему тегу p, потому что он не всегда имеет высоту всего одного абзаца, как в примере. Drastick

Похожие вопросы