Как выстроить элементы внутри дива в одну строку?

292
30 марта 2017, 18:37

Дано

<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

Answer 1

Дать элементам строчно-блочный тип

display:inline-block;
vetrical-align:middle; 

Или через флоат

float:left;

Но если через флоат, не забыть после этих блоков поставить еще 1 блок

 div.clear{
        clear:both;
    }

Вам скорее всего подойдет float

#prevProject
    float:left;
#nextProject
    float:right;
READ ALSO
Слайдер в моб.версии

Слайдер в моб.версии

При верстке использовал skd-slider, работает хорошо, но когда открываю сайт на смартфоне, не могу нажимая на слайдер перемещаться по сайту, другие...

221
Как сбросить кэш страницы через Javascript?

Как сбросить кэш страницы через Javascript?

Есть страница сайта, на ней данные подгружаются динамически через AJAXКак сделать, чтобы при переходе по истории (кнопки браузера "Вперед"/"Назад")...

321
Три цвета фона расположенные под углом

Три цвета фона расположенные под углом

Как мне получить фон, похожий на этот образ:

236
Фигура на css с заострением

Фигура на css с заострением

Возможно ли с помощью css выполнить такую рамку:

167