Горизонтальная прокрутка div внутри div отображается в виде таблицы

Question

Горизонтальная прокрутка div внутри div отображается в виде таблицы

0

Я пытаюсь создать веб-страницу с двумя столбцами. Я разбиваю столбцы на 2 divs с id справа и слева. Эти два столбца внутри DIV с идентификатором строкой и DIV находится внутри сНа называется таблица

<div id="table">
   <div id="row">
      <div id="left">
      </div>
      <div id="right">
      </right>
   </div>
</div>

Мой CSS разработан так, что у меня есть два столбца.

            #table
            {
                display:table;
                width: 100%;
            }
            #row
            {
                display:table-row;
                width: 100%;
            }
            #left
            {
                display:table-cell;
                width: 50%;
            }
            #right
            {
                display:table-cell;
                width: 50%;
            }

Это работает отлично. Теперь в моем левом столбце я хочу div, который может горизонтально прокручивать изображения, но я не хочу, чтобы в столбце осталось изменить ширину. Я хочу держать вправо и влево на 50% экрана.

Любая помощь в том, как создать sub div внутри левого div, который позволяет горизонтальную прокрутку изображений, будет очень полезной. Спасибо.

Matthew 21 март 2014, в 20:24

Источник

0

Вы имеете в виду прокрутку как слайд-шоу или просто горизонтальную полосу прокрутки, когда изображение больше, чем ширина div?
ilias 21 март 2014, в 19:24

Теги:

html

css

2 ответа

Ещё вопросы

Вы имеете в виду прокрутку как слайд-шоу или просто горизонтальную полосу прокрутки, когда изображение больше, чем ширина div?

user17606 · Answer 1 · 2014-03-21T17-31-00.000Z

Я изменил ваш стиль CSS, чтобы удалить таблицу и вместо нее использовать float:

        #table
        {
            width: 300px;
        }
        #row
        {
            width: 100%;
        }
        #left
        {
            width: 50%;
            float: left;
            overflow: auto;
        }
        #right
        {
            width: 50%;
            float: right;
        }

И добавьте переполнение: auto в любом div, который вы хотите, чтобы отображать полосу прокрутки. Я предполагаю, что у вас определенная ширина.

Пример: jsfiddle

Al.G. · Answer 2 · 2014-03-21T17-39-00.000Z

Почему бы не использовать:

overflow-x: auto;

Если sub div больше, появится полоса прокрутки.