Как выравнять div img and div h2_?

Question

[Indus Indusovich]

Задача простая,но я не могу никак найти решение

вот такая структура

<div class="col-lg-6">
    <div class="row">
        <div class="image"><a href="#"><img src="imagen.png"></a></div>
            <div class="text"><h2>Hello</h2></div>        
    </div>
</div>
    <div class="col-lg-6">
    <div class="row">
        <div class="image"><a href="#"><img src="imagen.png"></a></div>
            <div class="text"><h2>Hello</h2></div>        
    </div>
</div>

itmages.ru/image/view/3101282/3b1ef895
Как выровнять блок с текстом возле блока с картинкой?что бы он возле папки как бе был?

Answer 1

[Stalker_RED]

float: left и отступы как у h2.
https://jsfiddle.net/rbkpqunw/

Ну или inline-block, или объединить картинку и текст в один div. Зачем у вас отдельно блоки .image и .text?

Comments

[Indus Indusovich]

потому что блок .image динамичный,его можно включить и отключить.а h2 оформлен в div.clearfix
в итоге не получается ничего

[Stalker_RED]

Indus Indusovich: Не вижу в вашем примере никакого clearfix. В моем сообщении ссылка на вашу разметку, к которой я только добавил класс .test в двух местах, для наглядности.

И да, это всё с бутстрапом https://jsfiddle.net/rbkpqunw/2/

[Stalker_RED]

Indus Indusovich: Если шаблон можно редактировать, то решение простое: убрать лишние clearfix, добавить отступы для #panelID3 .siteName.
Может придется добавить класс clearfix к блоку #panelID3 .displayGrid, если кнопка view all съедет.

[Stalker_RED]

Indus Indusovich: Вообще вам еще с этими .siteName придется повозиться i.imgur.com/zTxQiG8.png

[Indus Indusovich]

Stalker_RED: А если только Css?

[Stalker_RED]

для начала перебить .clearfix

#panelID3 .clearfix {
    clear: none;
    float: left;
}
#panelID3 .clearfix:after,
#panelID3 .clearfix:before {
    display: none;
}

И подравнять вертикальные отступы у #panelID3 .siteName или у картинок с папками.

[Indus Indusovich]

Stalker_RED: ты крут!и вправду вообще .clearfix это ошибка прошлого верстальщика)))можно я тебя в скайп добавлю?)

[Stalker_RED]

Indus Indusovich: Не стоит. Я вообще не настоящий верстальщик.

Answer 2

[Александр Голубев]

Можно спокойно сократить до:

<div class="col-lg-6 row">
        <a class="image" href="#"><img src="imagen.png"></a>
        <h2 class="text">Hello</h2>
</div>

Результат будет такой же.
Для выравнивания добавить к a.image {float: left}