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

Question

[Роман Тузов]

Comments

[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>

[Роман Тузов]

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

[FeST1VaL]

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

[Роман Тузов]

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

Answer 1

[Тайгер]

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