CSS：在一行上的圖像和文本向右，沒有流文本？

我想在圖像右側顯示帶有文字的圖像。這應該都在一行，並在一些更多的文本。我不想讓文本的其餘部分在圖像周圍流動。CSS：在一行上的圖像和文本向右，沒有流文本？

例子：

一些文本... Lorem存有悲坐阿梅德，consetetur sadipscing elitr，SED直徑nonumy eirmod tempor invidunt UT labore等dolore麥格納aliquyam ERAT，sed的直徑voluptua。

我的形象，我的文字

一些文字... Lorem存有悲坐阿梅德，consetetur sadipscing elitr，SED直徑nonumy eirmod tempor invidunt UT labore等dolore麥格納aliquyam ERAT，SED直徑voluptua 。

我不想讓圖像之後的文字流過它。我嘗試了float：左邊的圖像，它將它與左邊對齊，但我不知道如何說只有一些文字會貼在它旁邊。

任何幫助？

謝謝！

來源

2012-12-18 user1856596

下面是做這件事：http://jsfiddle.net/2BJ7J/

基本上你浮動圖片和文字到只剩下一個容器。

.container { 
    width:480px; 
    padding:20px; 
    border:1px solid #ccc; 
    overflow:auto; 
} 
.container img { 
    float:left; 
    width:260px; 
    margin:0 20px 0 0; 
} 
.container .text { 
    float:left; 
    width:200px; 
} 



<div class="container"> 
    <img src="http://i.telegraph.co.uk/multimedia/archive/01452/fer1_1452403i.jpg" /> 
    <div class="text"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis, lorem eget pulvinar faucibus, diam tortor dapibus sapien, a egestas massa arcu ac risus. Ut tempor condimentum tincidunt. Donec vehicula, dui ornare ornare mollis, arcu nibh interdum ipsum, eu condimentum enim nunc id enim 
    </div> 
</div>

來源

2012-12-18 15:26:03

如果寬度被刪除不起作用......是嗎？ – user1856596

哪個寬度？容器？它仍然可以工作，但容器將拉伸到其父母的寬度。您可以通過將容器設置爲顯示來避免這種情況：inline-block –

謝謝，我試過 – user1856596

CSS

p { line-height:1.5; outline:1px dashed green } 

.left-img span { /* span would be `img` in your project */ 
    float:left; 
    margin-right:1em; 
    /* BEG not needed for image */ 
    background-color:gray; 
    width:20px; 
    height:200px; 
    outline:1px dotted; 
    /* END not needed for image */ 
} 

.left-img + p { clear:left; }

HTML

<p>Lorem ipsum ....</p> 
<p class="left-img"><span></span>More text</p> 
<!-- Replace <span></span> with <img> 
---- working code would be: 
---- <p class="left-img"><img src="...">More text</p> 
--> 
<p>Lorem ipsum ....</p>

看看你加價的語義，並採取自然文檔流程的優勢。上面的CSS最後一行是關鍵：「<p>下面的一個left-img類需要返回到正常的文檔流。」

小提琴：

來源

2012-12-18 15:40:56 Dawson

我在哪裏將圖像放入代碼中？跨度內？ – user1856596

只是假裝是：答覆已更新。請參閱'工作代碼將...' – Dawson

CSS的第一行需要將「span」替換爲「img」。即：'.left-img img {...}'而不是.left-img span {...} – Dawson

CSS：在一行上的圖像和文本向右，沒有流文本？

回答

相關問題