Составление списка элементов без абсолютного позиционирования

Question

Составление списка элементов без абсолютного позиционирования

0

Привет, я хотел бы разместить элементы списка, содержащие изображения друг над другом (например, стопку карт) без использования абсолютного позиционирования.

Так я сделал это, используя абсолютное позиционирование.

.cards {
    width: 200px;
    height: 200px;
    position: absolute;  
    top:75px;  
}

и cards - это li с img внутри.

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

Здесь мой контейнер

  <div class="col-md-4">
    <ul class="swing-stack">
       <li class="cards" ng-repeat="card in cards"><img ng-src="{{card.image}}"></li>
    </ul>
  </div>

Есть идеи? Благодарю!

d9120 20 авг. 2015, в 17:20

Источник

0

Может быть, добавив CSS clear: both будут работать?
Lyall 20 авг. 2015, в 14:44
0

Не могли бы вы включить изображение или пример эффекта «стопка карт», который вы ищете? Вы ищете с высоты птичьего полета стек или сбоку?
Matt Hansen 20 авг. 2015, в 15:04
0

Вид с высоты птичьего полета, где пользователь будет видеть только одно изображение, но под верхним изображением будет больше.
d9120 20 авг. 2015, в 16:10

Показать ещё 1 комментарий

Теги:

html

angularjs

css

1 ответ

Ещё вопросы

Может быть, добавив CSS clear: both будут работать?
Не могли бы вы включить изображение или пример эффекта «стопка карт», который вы ищете? Вы ищете с высоты птичьего полета стек или сбоку?
Вид с высоты птичьего полета, где пользователь будет видеть только одно изображение, но под верхним изображением будет больше.

MaKR · Answer 1 · 2015-08-20T15-12-00.000Z

Вам нужно будет использовать абсолютное позиционирование, чтобы это произошло. Чтобы помочь с проблемой, абсолютное позиционирование приводит к тому, что вы используете относительный позиционный div вне их. Абсолютные позиционированные позиции внутри контейнера относительного положения расположены в левом верхнем углу его родителя, а не на странице.

#cardsContainer {
    position:relative;
    top: 75px;
}

.cards {
    width: 200px;
    height: 200px;
    position: absolute;  
    top:0px;
}