горизонтальная прокрутка через div

Question

горизонтальная прокрутка через div

0

Я пытаюсь сделать так, чтобы выравнивать divs с большим количеством текста по горизонтали, чтобы вы могли прокручивать их по горизонтали. Не очень опытный, и я не могу понять, что я делаю неправильно.

Вот мой css:

#content {
  font-size: 18px;
  text-align: justify;
  display: inline-block;
  vertical-align: middle;
  overflow-x: auto;
  height: 70%;
  margin-top: 15%;
  margin-bottom: 15%;
}

.item {
  width: 50%;
  max-height: 70%;
  margin-bottom: 30px;
  margin-top: 100px;
  margin-left: 25%;
  margin-right: 25%;
  overflow: scroll;

}

Благодарю!

user3102617 14 дек. 2013, в 17:35

Источник

1

Пожалуйста, сделайте демо на JSFiddle.
str 14 дек. 2013, в 16:34
0

HTML нужен ....
Ani 14 дек. 2013, в 17:41

Теги:

html

css

alignment

1 ответ

Ещё вопросы

Пожалуйста, сделайте демо на JSFiddle.

Patrick · Answer 1 · 2013-12-14T16-22-00.000Z

Я предполагаю, что вы хотите поместить несколько .item в #content и они должны затем обернуться горизонтально. Это верно?

Тогда вам понадобится обертка поверх вашего #content с фиксированной шириной (это будет ваше "окно прокрутки"). #content сам должен быть шире, чтобы вы могли прокручивать его, пока оболочке требуется свойство overflow-x:scroll. Поскольку вы не знаете, насколько широка ваша #content (за исключением случаев, когда вы знаете количество .item), я предлагаю установить ее с помощью Javascript. Наконец, важно иметь float: left в вашем .item, иначе они не будут .item горизонтально.

Кроме того, вы можете позволить JS установить высоту #content на самый высокий .item если вы не хотите, чтобы это было одинаково для всех .item s.

Взгляните на эту скрипку, если это то, чего вы пытаетесь достичь.

Вы можете использовать столбцы css3. Однако вы бы еще не использовали его, так как у вас не будет поддержки IE9 и ниже. Смотрите, как это работает.

Ура!