Как перемещать изображения влево и вправо без текстовых переносов

Question

У меня это изображение всплыло слева от текста, работает нормально, используя CSS ниже. Как бы я повторил эффект для изображения справа от текста на той же странице. Нужно ли, например, исправление между левым и правым?

Спасибо

.innercontent {
padding: 0 0 0 185px;
position: relative; 
text-align:justify;
}

.innercontent img {
    left: 0;
    position: absolute;
    top: 0;
}

<div class="innercontent">
     <img src="/media/18/tractor_150.jpg" alt="tractor" width="150" height="107" />
     <p>Lorem ipsum dolor sit amet....</p>
</div>

Answer 1

Я бы просто поместил оба элемента влево. Это приведет к тому, что оба элемента будут расположены рядом друг с другом.

[HTML] (Img слева)

<div class="innercontent">
   <img class='floatLeft' />
   <p class='floatLeft'>Lorem ipsum dolor sit amet....</p>
   <div class='cleaner'></div>
</div>

(изображение справа от текста)

<div class="innercontent">
    <p class='floatLeft'>Lorem ipsum dolor sit amet....</p>
    <img class='floatLeft' />   
    <div class='cleaner'></div>  
</div>

[CSS]

.cleaner{clear: left; line-height: 0; height: 0;} 
.floatLeft{float: left;}

Очиститель используется для возврата следующего элемента назад после всплывающего элемента. Я всегда ставлю это после того, как плаваю элементы. Обычно это нормально работает без него, но я склонен плавать элементы с другими "не всплывающими" элементами внутри.

Также в CSS вам, возможно, придется указывать img непосредственно для float. Я не уверен, точный синтаксис, но что-то вроде ...

.floatLeft>img{float: left;}

Answer 2

сделать CSS более конкретным, например:Что я делаю, так это создаю мастер-суперкласс: .fl и .fr для float left и float right и просто применяю его на ходу, делая мой код чище и легким для понимания, когда они видят его в html-документе..innercontent img.fl {padding: 0 0 0 185px;положение: относительное;выравнивания текста: оправдать;}

.innercontent img {
    left: 0;
    position: absolute;
    top: 0;
}

<div class="innercontent">
     <img src="/media/18/tractor_150.jpg" alt="tractor" width="150" height="107" />
     <p>Lorem ipsum dolor sit amet....</p>
</div>

просто напишите об этом, если не ясно: D