CSS文本環繞圖像

當瀏覽器窗口變小時，我需要一些幫助來阻止我的文本在我的圖像下環繞。CSS文本環繞圖像

HTML：

<div class='article'> 
    <img src='images/fakeSlider.png' /> 
    <h2>Example</h2> 
    <p>This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.This is my text.</p> 
</div>

CSS：

.article { 
    min-width: 70%; 
    max-width: 100%; 
} 

.article h2 { 
    float: left; 
    font-family: Cabin Bold; 
    font-size: 22px; 
    padding: 5px; 
    margin: 5px 10px auto; 
} 

.article p { 
    float: left; 
    font-family: Cabin; 
    font-size: 18px; 
    padding: 5px; 
    margin: 5px 10px auto; 
    min-width: 50%; 
    max-width: 70%; 
    display: block; 
} 

.article img { 
    min-width: 20%; 
    max-width: 40%; 
    float: left; 
    height: 120px; 
    padding: 5px; 
    margin: 5px 10px auto; 
}

左右;要清楚...我想要它，所以圖像在左側，而標題在圖像的右上方，文本在標題下。它看起來不錯，直到瀏覽器窗口變小並且文本在圖像下方。我不確定我是否愚蠢，只是看不到有什麼問題，但我已經嘗試了一些東西，但仍然無法實現。

任何幫助表示讚賞。謝謝。

來源

2013-11-01 user2943492

您需要支持IE多久？ – j08691

您的問題是，文本和圖像的寬度，邊距和填充添加到可用的整個寬度以上，因此文本塊被移動到「下一行」。 – frozenkoi

使用無包裝：

.article p 
{ 
    white-space:nowrap; 
}

我上面列出你的代碼進行測試，運行完美。請標記爲答案，如果這有幫助。

來源

2013-11-01 01:34:10 colbyJax

CSS文本環繞圖像

回答

相關問題