Как сделать чтобы элементы находились на одной линии?

Question

[sunnyrio]

Как сделать чтобы элементы находились на одной линии? смотри рисунок снизу
Code:

<div class="col-md-5">
                    <H1 class="h1block1">Introducing <font style="font-weight: bold;">Umbrella.</font></H1><br/>
                    <H2 class="h2block1">Made to modify and use anywhere</H2><br/>
                    <H3 class="h3block1">
                        > Sed ut perspiciatis unde omnis<br/>
                        > Iste natus error sit voluptatem accusantium<br/> 
                        > doloremque laudantium<br/>
                    </H3>
                    <button class="top-but">
                        <img src="img/icon/icon_cloud.png">
                        Download
                    </button>
                    <button class="top-but">
                        <img src="img/icon/icon_eye.png">
                        Vew gallery
                    </button>
                </div>

CSS:

.top-but {
    background-color: #f8e514;
    border: 3px black solid;
    padding: 23px 35px;
    font-size: 22px;
}

Answer 1

[Виталий]

float:left не пробовали (или dislay:inline-block)? Но вообще у вас семантика неправильная, как минимум нужно:
- из h1 выбросить font style,
- h2 лучше сделать простым дивом с классом description
- h3 вообще должен быть списком,
- кнопки должны быть ссылками,
- ну и по убирать br везде.

Comments

[sunnyrio]

вы можете написать это кусочек кода по принципу который вы хотите мне объяснить, чтобы я наглядно ивдел так проще понять

Answer 2

[Maxim Nepritimov]

display: inline-block; // для каждого блока, который надо в строку

Comments

[sunnyrio]

в css top-but добавить можно?

Answer 3

[Pervachok]

display: flex ;//для блока внутри которого находятся элементы
flex-direction: row;

Comments

[Maxim Nepritimov]

Думаю, рановато ему еще флексом заниматься.

Answer 4

[Егор]

Добавь класс pull-left button-у

Answer 5

[Виктор Таран]

Во первых это бутстрап а следоватлеьно нужно следовать его философии
в кол нужно кинуть кол и уж размером кнопки можно пожертвовать ограничив его размер именно возможностями колов а не пиксел в пиксел, ну уж или на ухдой конец классом ограничить уже внутри кола.
Собственно отпадет проблемма адаптации на устройствах.