1

Всем привет! Сделал следующую конструкцию:

<div class="col-lg-4 col-md-6 col-xs-8 thumb cursor">
        <a class="thumbnail cursor" href="#">
            <img style = "position:left; margin-right:50%;" class = "imgd" src="img/Lady in Red.jpg"/>
            <div class="wrapper cursor">
                <div class="caption post-content cursor">
                    <p class = "aria">Text1</p>
                    <p class = "fontd">Text2</p>
                    <button class = "buttonx">Посмотреть продукт</button>        
                </div>
            </div>
        </a>
    </div>

Нужно, чтобы кнопка (под классом buttonx, который отвечает только за стилистику кнопки) и два текста (классы тоже отвечают только за стили), которые находятся выше кнопки перенести правее изображения. Вот скриншот, красный цвет - изображение, которое должно быть левее этих трех элементов, а не ниже.

Скриншот

2 ответа 2

0

Если ты пишешь на бутстрапе, ну так и загони свои элементы в сетку:

<div class="row">
   <!-- левая колонка с картинкой -->
   <div class="col-md-6">
      <img class = "imgd" src="img/Lady in Red.jpg"/>
   </div>
   <!-- правая колонка с текстом и кнопкой -->
   <div class="col-md-6">
      <div class="wrapper cursor">
            <div class="caption post-content cursor">
                <p class = "aria">Lady in Red</p>
                <p class = "fontd">Туалетная вода</p>
                <button class = "buttonx">Посмотреть продукт</button>        
            </div>
        </div>
   </div>
</div>
2
  • Спасибо большое! Однако, проблема теперь новая. row растянул все по ширине экрана, а нужно чтобы горизонтально поместилось 3 таких. 25 авг 2017 в 11:42
  • @georgeviskin, ну так и помести этот row внутрь col-md-4. А вообще почитай про сетку бутстрап, раз уж ты используешь этот фреймворк: itchief.ru/lessons/bootstrap-3/… 26 авг 2017 в 4:59
0

Задайте изображению float:left; - это будет обтекание этой картинки, т.е. если текст будут по высоте больше картинки, то всё, что ниже картинки - будет уже на всю строчку.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.