Как разместить кнопки по обе стороны от картинки, где ошибка (Снизу код и то, что получается)?

Question

Роман Тузов @Hutson

HTML
CSS

Как разместить кнопки по обе стороны от картинки, где ошибка (Снизу код и то, что получается)?

Вопрос задан более трёх лет назад
87 просмотров

6 комментариев

Подписаться 1 Простой 6 комментариев

FeST1VaL @FeST1VaL

если у вас обычная верстка, то почему нельзя поставить левую кнопку перед блоком с картинкой?

Написано более трёх лет назад
Роман Тузов @Hutson Автор вопроса

Артем Будин, Справедливо, спасибо, а какая может быть не обычная?

Написано более трёх лет назад

FeST1VaL @FeST1VaL

Hutson, не обычная, это например которая создается через JS. Например слайдеры, ты им отдаешь в div обернутые блоки со слайдером. а на выходе он еще раз оборачивает их добавляя свои классы итд.

Пример

Начальная верстка:

<div class="owl-carousel">
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
  <div> Your Content </div>
</div>

А такая примерно на выходе:

<div class="owl-carousel owl-theme owl-loaded owl-drag">
	<div class="owl-stage-outer">
		<div class="owl-stage" style="transform: translate3d(-1176px, 0px, 0px); transition: all 0s ease 0s; width: 4704px;">
			<div class="owl-item cloned" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>7</h4>
				</div>
			</div>
			<div class="owl-item cloned" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>8</h4>
				</div>
			</div>
			<div class="owl-item cloned" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>9</h4>
				</div>
			</div>
			<div class="owl-item cloned" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>10</h4>
				</div>
			</div>
			<div class="owl-item cloned" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>11</h4>
				</div>
			</div>
			<div class="owl-item cloned" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>12</h4>
				</div>
			</div>
			<div class="owl-item active" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>1</h4>
				</div>
			</div>
			<div class="owl-item active" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>2</h4>
				</div>
			</div>
			<div class="owl-item active" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>3</h4>
				</div>
			</div>
			<div class="owl-item active" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>4</h4>
				</div>
			</div>
			<div class="owl-item active" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>5</h4>
				</div>
			</div>
			<div class="owl-item" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>6</h4>
				</div>
			</div>
			<div class="owl-item" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>7</h4>
				</div>
			</div>
			<div class="owl-item" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>8</h4>
				</div>
			</div>
			<div class="owl-item" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>9</h4>
				</div>
			</div>
			<div class="owl-item" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>10</h4>
				</div>
			</div>
			<div class="owl-item" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>11</h4>
				</div>
			</div>
			<div class="owl-item" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>12</h4>
				</div>
			</div>
			<div class="owl-item cloned" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>1</h4>
				</div>
			</div>
			<div class="owl-item cloned" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>2</h4>
				</div>
			</div>
			<div class="owl-item cloned" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>3</h4>
				</div>
			</div>
			<div class="owl-item cloned" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>4</h4>
				</div>
			</div>
			<div class="owl-item cloned" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>5</h4>
				</div>
			</div>
			<div class="owl-item cloned" style="width: 186px; margin-right: 10px;">
				<div class="item">
					<h4>6</h4>
				</div>
			</div>
		</div>
	</div>
	<div class="owl-nav">
		<button class="owl-prev" role="presentation" type="button"><span aria-label="Previous">‹</span></button><button class="owl-next" role="presentation" type="button"><span aria-label="Next">›</span></button>
	</div>
	<div class="owl-dots">
		<button class="owl-dot active" role="button"><span></span></button><button class="owl-dot" role="button"><span></span></button><button class="owl-dot" role="button"><span></span></button>
	</div>
</div>

Написано более трёх лет назад

Роман Тузов @Hutson Автор вопроса

Артем Будин, Ну я как раз и делаю слайдер

Написано более трёх лет назад
FeST1VaL @FeST1VaL

Hutson, ну вы делаете его с 0, так что вы можете как хотите ставить) я к тому что в моем примере, OWL создает так же стрелочки как и вы, т.е после блока со слайдами.
Короче говоря я бы делал через абсолют

Написано более трёх лет назад
Роман Тузов @Hutson Автор вопроса

Артем Будин, Да я сначала так и сделал, а потом поместил перед изображением. Всё равно так же стало, так и оставил

Написано более трёх лет назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 21 час назад
- 129 просмотров
2

ответа
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- вчера
- 90 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- вчера
- 97 просмотров
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- вчера
- 92 просмотра
0

ответов
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- вчера
- 73 просмотра
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- вчера
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- 22 нояб.
- 61 просмотр
1

ответ
CSS

Простой
Можно ли в CSS сгладить углы при использовании border-radius?
- 1 подписчик
- 22 нояб.
- 100 просмотров
1

ответ
CSS

+2 ещё

Простой
Как корректно настроить Gulp + Sass?
- 1 подписчик
- 21 нояб.
- 83 просмотра
2

ответа
HTML

Простой
Почему некорректно отражается текстареа в Osclass evolution?
- 1 подписчик
- 21 нояб.
- 35 просмотров
0

ответов
Показать ещё Загружается…

Fullstack Developer под Wordpress

Future Search

от 90 000 до 150 000 ₽

WordPress-разработчик

div. • Ставрополь

от 50 000 до 120 000 ₽

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Маркетплейс в МЕДИЦИНСКОЙ тематике

24 нояб. 2024, в 21:55

200000 руб./за проект

Нужно подобие hamster combat

24 нояб. 2024, в 21:41

1000 руб./за проект

Тестирование Desktop-приложение

24 нояб. 2024, в 21:19

35000 руб./за проект

если у вас обычная верстка, то почему нельзя поставить левую кнопку перед блоком с картинкой?
Артем Будин, Справедливо, спасибо, а какая может быть не обычная?
Артем Будин, Ну я как раз и делаю слайдер
Hutson, ну вы делаете его с 0, так что вы можете как хотите ставить) я к тому что в моем примере, OWL создает так же стрелочки как и вы, т.е после блока со слайдами.
Короче говоря я бы делал через абсолют
Артем Будин, Да я сначала так и сделал, а потом поместил перед изображением. Всё равно так же стало, так и оставил

Answer 1 · 2019-10-31 16:54:31

Тайгер @webdi

HTML, JS, PHP

<button class="left-bt">Назад</button> расположить до тега <div class="album-wrapper">

Ответ написан более трёх лет назад

Комментировать

Как разместить кнопки по обе стороны от картинки, где ошибка (Снизу код и то, что получается)?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт