如何將圖像左右浮動而不用文字包裝

我將此圖像浮動到使用下面的css正常工作的文本左側。我將如何在同一頁面上的文字右側重複圖像的效果。例如，我需要在左側和右側之間使用clearfix嗎？如何將圖像左右浮動而不用文字包裝

感謝

.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>

來源

2012-02-01 MikeW

讓CSS更加具體，如：
我要做的就是創建主父類：.fl和.FR浮法左，右浮動，只是適用於它，因爲我走品牌我的代碼更清晰，並且在通過html文檔查看時很容易遵循。 .innercontent img.fl {padding：0 0 0 185px; 位置：相對; 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>

只是張貼到這一點，如果沒有明確的：d

來源

2012-02-01 01:31:18 mkuk

這裏是玩弄我有一些事情，似乎你想要做什麼popluated它的jsfiddle： HTTP：//的jsfiddle。淨/ ctcET / – mkuk 2012-02-01 01:35:35

我只想浮動元素都向左側。這將導致這兩個元素並排站點。

[HTML] （圖上左）

<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直接浮動。我不知道確切的語法，但像...

.floatLeft>img{float: left;}

來源

2012-02-01 01:41:55 sreyaNotfilc

如何將圖像左右浮動而不用文字包裝

回答

相關問題