-1

Как написать CSS-код, чтобы в нечётных галереях изображения шли справа налево, а в чётной — слева направо

h2 {
  margin: 0;
}

.gallery {
  box-shadow: 5px 5px 10px grey;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
}

.gallery: {
  flex-direction: row;
}

.gallery: {
  flex-direction: row-reverse;
}

.gallery>img {
  width: 200px;
}
<h2>Галерея 1</h2>
<div class="gallery gallery-1">
  <img src="img/photo-1.jpeg" alt="">
  <img src="img/photo-2.jpeg" alt="">
  <img src="img/photo-3.jpeg" alt="">
</div>

<h2>Галерея 2</h2>
<div class="gallery gallery-2">
  <img src="img/photo-4.jpeg" alt="">
  <img src="img/photo-5.jpeg" alt="">
  <img src="img/photo-6.jpeg" alt="">
</div>

<h2>Галерея 3</h2>
<div class="gallery gallery-3">
  <img src="img/photo-7.jpeg" alt="">
  <img src="img/photo-8.jpeg" alt="">
  <img src="img/photo-9.jpeg" alt="">
</div>

2 ответа 2

3

Предостовляю вам мой код )

h2 {
  margin: 0;
}

.gallery {
  box-shadow: 5px 5px 10px grey;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
}

.gallery:nth-of-type(2n) {
  flex-direction: row;
}

.gallery:nth-of-type(2n - 1) {
  flex-direction: row-reverse;
}

.gallery>img {
  width: 100px;
}
<h2>Галерея 1</h2>
<div class="gallery gallery-1">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
</div>

<h2>Галерея 2</h2>
<div class="gallery gallery-2">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
</div>

<h2>Галерея 3</h2>
<div class="gallery gallery-3">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
</div>

h2 {
  margin: 0;
}

.gallery {
  box-shadow: 5px 5px 10px grey;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
}

.gallery-row-reverse {
  flex-direction: row-reverse;
}


.gallery>img {
  width: 100px;
}
<h2>Галерея 1</h2>
<div class="gallery gallery-1 gallery-row-reverse">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
</div>

<h2>Галерея 2</h2>
<div class="gallery gallery-2">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
</div>

<h2>Галерея 3</h2>
<div class="gallery gallery-3 gallery-row-reverse">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
</div>

<h2>Галерея 4</h2>
<div class="gallery gallery-4">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
  <img src="https://dummyimage.com/300.png/09f/fff" alt="">
</div>

3
  • 1
    Если добавить div между галереями, то всё сломается)
    – De.Minov
    11 апр 2022 в 6:11
  • @De.Minov да согласен, ном nth-childs() как-то странно реагирует xD
    – Miha
    11 апр 2022 в 6:16
  • Потому что h2 => :nth-child(1), .gallery => :nth-child(2), и т.д., а :nth-of-type будет отталкиваться только от тега, т.е. от div, и если добавить другой div, то он тоже попадёт под условие
    – De.Minov
    11 апр 2022 в 6:19
1

Я бы посоветовал вручную повесить классы.

h2 {
  margin: 0;
}

.gallery {
  box-shadow: 5px 5px 10px grey;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
}

.gallery-even {
  flex-direction: row;
}

.gallery-odd {
  flex-direction: row-reverse;
}

.gallery > img {
  width: 100px;
  height: 100px;
  background: blue;
}

.gallery-even > img:not(:last-child) {
  margin-right: 10px;
}

.gallery-odd > img:not(:last-child) {
  margin-left: 10px;
}
<h2>Галерея 1</h2>
<div class="gallery gallery-even">
  <img src="img/photo-1.jpeg" alt="">
  <img src="img/photo-2.jpeg" alt="">
  <img src="img/photo-3.jpeg" alt="">
</div>

<h2>Галерея 2</h2>
<div class="gallery gallery-odd">
  <img src="img/photo-4.jpeg" alt="">
  <img src="img/photo-5.jpeg" alt="">
  <img src="img/photo-6.jpeg" alt="">
</div>

<h2>Галерея 3</h2>
<div class="gallery gallery-even">
  <img src="img/photo-7.jpeg" alt="">
  <img src="img/photo-8.jpeg" alt="">
  <img src="img/photo-9.jpeg" alt="">
</div>

Либо же делать это при помощи Javascript

let gallery = document.querySelectorAll('.gallery');
gallery.forEach(function(e, i) {
  e.classList.add(`gallery-${i % 2 === 0 ? 'even' : 'odd'}`);
});
h2 {
  margin: 0;
}

.gallery {
  box-shadow: 5px 5px 10px grey;
  padding: 20px;
  margin-bottom: 20px;
  display: flex;
}

.gallery-even {
  flex-direction: row;
}

.gallery-odd {
  flex-direction: row-reverse;
}

.gallery > img {
  width: 100px;
  height: 100px;
  background: blue;
}

.gallery-even > img:not(:last-child) {
  margin-right: 10px;
}

.gallery-odd > img:not(:last-child) {
  margin-left: 10px;
}
<h2>Галерея 1</h2>
<div class="gallery">
  <img src="img/photo-1.jpeg" alt="">
  <img src="img/photo-2.jpeg" alt="">
  <img src="img/photo-3.jpeg" alt="">
</div>

<h2>Галерея 2</h2>
<div class="gallery">
  <img src="img/photo-4.jpeg" alt="">
  <img src="img/photo-5.jpeg" alt="">
  <img src="img/photo-6.jpeg" alt="">
</div>

<h2>Галерея 3</h2>
<div class="gallery">
  <img src="img/photo-7.jpeg" alt="">
  <img src="img/photo-8.jpeg" alt="">
  <img src="img/photo-9.jpeg" alt="">
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.