2015-11-30 4 views
0

Я работаю на веб-сайте и большая часть моей страницы имеют такую ​​структуру:Колонна одинаковой высоты с отзывчивым изображения внутри

<div class="row"> 
<div class="col-1-2"> 
    <img> 
</div> 
<div class="col-2-2"> 
    <p>Text</p> 
</div> 
</div> 

Я хотел бы, что образ первого столбца был на той же высоте, текст во втором столбце.

Кто-нибудь знает, как я могу это сделать?

Заранее спасибо;)

PS: Извините за плохой английский

+1

Предполагаю, что вы используете какой-то CSS Framework, Bootstrap или Foundation? Посмотрите на них: [столбцы с одинаковой высотой начальной загрузки] (http://getbootstrap.com.vn/examples/equal-height-columns/), [столбцы с одинаковой высотой фонда] (http://foundation.zurb.com/ sites/docs/v/5.5.3/components/equalizer.html), [Столбцы с одинаковой высотой по ширине флюида] (https://css-tricks.com/fluid-width-equal-height-columns/) – Muhammet

+0

Нет, я использовал этот веб-сайт: http://www.responsivegridsystem.com/calculator/ – Paul

+1

Проверьте это, затем http://stackoverflow.com/questions/2114757/css-equal-height-columns – Muhammet

ответ

0

вы должны установить контейнер на изображение, абсолютные и строку как относительные, а затем установить ширину в 50% емкость колонки и высотой 100%. img должен иметь максимальную ширину: 100% в качестве свойства css

+0

Когда вы говорите контейнер изображения, вы имеете в виду класс = "col-1-2"? – Paul

+0

да col-1-2, который имеет изображение – Rovi

Смежные вопросы