Дано
<div class="row" style="margin: 20px;">
<div class="col-sm-10 col-sm-offset-1 col-xs-12 col-xs-offset-0">
<div style="text-align: center; display: inline;">
<div class="columns">
<div class="twentytwenty-container">
<img width="100%" id="beforeImg" src="img/projects/1_before.jpg" />
<img width="100%" id="afterImg" src="img/projects/1_after.jpg" />
</div>
</div>
<img id="prevProject" src="img/left-arrow.png" width="25px" style="cursor: pointer; display: inline;"/>
ЛИСТАЙТЕ ПРОЕКТЫ
<img id="nextProject" src="img/right-arrow.png" width="25px" style="cursor: pointer; display: inline;"/>
</div>
</div>
</div>
Как выстроить в одну строку последовательно #prevProject, .twentytwenty-container, #nextProject ?
UPDATE
<div class="row" style="margin: 20px;">
<div class="col-sm-10 col-sm-offset-1 col-xs-12 col-xs-offset-0">
<div style="vertical-align: middle;">
<img id="prevProject" src="img/left-arrow.png" width="25px" style="cursor: pointer; float: left;"/>
<img id="nextProject" src="img/right-arrow.png" width="25px" style="cursor: pointer; float: right;"/>
<div class="columns">
<div class="twentytwenty-container">
<img width="100%" id="beforeImg" src="img/projects/1_before.jpg" />
<img width="100%" id="afterImg" src="img/projects/1_after.jpg" />
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</div>
Выполнены рекомендации. Элементы стоят по порядку, но нет вертикального выравнивания. Прошу ознакомиться с тем что имеем http://potolki05.ru/test.html#photos_sect
Дать элементам строчно-блочный тип
display:inline-block;
vetrical-align:middle;
Или через флоат
float:left;
Но если через флоат, не забыть после этих блоков поставить еще 1 блок
div.clear{
clear:both;
}
Вам скорее всего подойдет float
#prevProject
float:left;
#nextProject
float:right;
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники
Продвижение своими сайтами как стратегия роста и независимости