CSS如何浮動或顯示未知寬度的兩個元件彼此相鄰的未知寬度

的一個div內我有一個img和需要接下來要顯示到彼此的文本塊。如果文字在垂直方向上延伸，文字不應該包裹在圖像下方。 img始終爲50px，但文本需要流動以適應容器的剩餘寬度，隨後將其設置爲用戶瀏覽器的寬度。我該怎麼做呢？CSS如何浮動或顯示未知寬度的兩個元件彼此相鄰的未知寬度

所以基本上：

<div> <!--width is 100% of browser--> 
<img/> <!--width is 48px--> 
<p>Lorem Ipsum</p><!--width is unknown. Should show up next to img --> 
</div>

來源

2011-07-21 mheavers

您的包裹DIV應該得到overflow: hidden或某種clearfix的。

img { 
    float: left; 
}

編輯：不要讓文字去下面的圖像：

p { 
    margin-left: 48px; 
}

小例子：http://jsfiddle.net/AJkRu/3/

來源

2011-07-21 16:00:41 binarious

很好 - 非常感謝。 – mheavers

試試這個：

<html> 
<head> 
<style type="text/css"> 


.left 
{ 
float:left; 
width:50px; 
} 

.right 
{ 
float:right; 
width:400px; 
} 
</style> 
</head> 

<body> 
<div style="width: 500px;"> 

<div class="left"> 
<img src="logocss.gif" /> 
</div> 

<div class="right"> 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This. is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This. is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text. 
This is some text. This is some text. This is some text 
</div> 

</div> 
</body> 

</html>

來源

2011-07-21 16:07:41 sap

我知道如何浮動元素，但我不希望文字有沒有去直接在圖像的下方。 – mheavers

-2

你也可以使用表

做它

<table> 
<tr> 
<td><img/>this is the image</td> 
<td><p>ur text here</p></td> 
</tr> 
</table>

來源

2011-07-21 16:10:43

這是隻爲形象？爲什麼所有的div和額外的CSS？

CSS

p{padding-left:50px;} 
p img{float:left;margin-left:-50px;}

HTML

<p><img /> ... </p>

來源

2011-07-21 16:14:24 Joshua

我不希望文本換行過圖像 – mheavers

下面像這樣http://jsfiddle.net/AJkRu/3/？然後在我的回答中添加一個保證金，就像我在郵件中發表的那樣。 – binarious

查看更新的CSS – Joshua

如果您知道圖像的永遠不會比更寬48-50px你可以給一個固定的寬度，或把它放在一個div裏面有一個固定的寬度？

div img { 
width:48px; 
float:left; 
}

然後P將環繞它完美，一定要添加一些右側和底部邊緣，如果是這樣的話。

，並給予包裝DIV（全寬）某種形式的clearfix的，甚至只是clear:both我想。

div { 
clear:both; 
width:100%; 
}

來源

2011-07-21 17:14:35 Jassi

CSS如何浮動或顯示未知寬度的兩個元件彼此相鄰的未知寬度

回答

相關問題