Проблема с пониманием свойства «порядок» в css

avatar
rahidt
8 августа 2021 в 16:08
48
1
-2

enter image description here

Это мой HTML-код для этого

<section class="block container">
  <article class="grid grid--1x2 feature">
    <div class="feature__content">
      <span class="icon-container">
        <svg class="icon icon--primary">
          <use xlink:href="../images/sprite.svg#easy"></use>
        </svg>
      </span>
      <h3 class="feature__heading">Super Easy to Use</h3>
      <p class="">
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
        Consectetur, vitae facilis quo eligendi pariatur quia non culpa
        animi voluptatibus optio?
      </p>
      <a href="#" class="link-arrow">Learn More</a>
    </div>
    <img class="feature__image" src="images/easy@1x.png" alt="" />
  </article>
</section>

Это сетка. Я хочу показать изображение в левой части. Для этого мой код CSS выглядит следующим образом:

.feature:nth-of-type(1) .feature__content {
    order: 2;
  }

Это работает.

enter image description here

Но если использовать этот код ниже, это не сработает.

.feature:nth-of-type(1) .feature__image {
    order: 1;
  }

Я хочу понять, почему это не работает. Разве это не одно и то же?

Источник
Heretic Monkey
8 августа 2021 в 16:12
4

Пожалуйста, отредактируйте свой вопрос, чтобы показать остальную часть CSS, примененную к HTML. Было бы неплохо, если бы вы могли использовать фрагменты стека (значок выглядит как <> на панели инструментов редактора), чтобы создать минимальный воспроизводимый пример непосредственно в вопросе.

Ответы (1)

avatar
NI sajeeb
9 августа 2021 в 17:51
-2

Ваше изображение за пределами Поместите изображение внутрь div «.feature__content»

isherwood
9 августа 2021 в 17:53
1

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

Heretic Monkey
9 августа 2021 в 17:54
0

См. также Как ответить.

Quentin
9 августа 2021 в 17:55
0

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