Создание горизонтальной прокрутки и элементов обтекания

Question

Создание горизонтальной прокрутки и элементов обтекания

0

У меня есть горизонтальный свиток, который я создаю, но divs заканчиваются на следующей строке, а не на экране. По сути, я пытаюсь создать это.

http://codepen.io/calendee/pen/HIuft?editors=100

Мой CSS выглядит

.wide-as-needed {
  white-space: nowrap;
  overflow: scroll;
}

.scroll {
  min-width: 100%;
}

parts * {
  width: 100px;
}

parts {
  display: inline;
  float: left;
  margin-right: 20px;
}

Мой HTML выглядит

<ion-scroll class="wide-as-needed" direction="x">
    <parts ng-repeat="part in popularParts" part="part"</parts>
</ion-scroll>

Образец элемента детали здесь

<parts ng-repeat="part in popularParts" part="part" class="">
    <div class="text-center">
        <img src="image.png">
        <div class="bold assertive ng-binding">Product 1</div>
        <div class="assertive ng-binding">John Deere</div>
        <div class="bold balanced ng-binding">$88.0</div>
    </div>
</parts>

Что не так и как я исправить это?

jason328 25 июнь 2015, в 20:51

Источник

Теги:

html

angularjs

css

ionic

1 ответ

Ещё вопросы

tylerism · Answer 1 · 2015-06-25T16-21-00.000Z

Нужно ли использовать ионный? Вот пример с CSS и HTML, а не с использованием Ionic.

http://codepen.io/tylerism/pen/zGPQaj

.item{  
  display: inline-block;
  vertical-align: middle;
  background:#333388;
  color:white;
  padding:10px 50px;
  margin-right:10px;
}

.scroll_outer{
  width: auto;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}

Это работает?

Нет, это не сработает. Ионная требуется. Иначе я бы уже получил такой ответ.