保持圖像

的文字吧？如果你在頁面http://www.ribevi.com/red_wines.html 保持圖像

你可以注意到，第五屆酒馬羅有一些文字，善有善報和瓶子圖像下仔細看。

有沒有辦法阻止這種情況的發生，並且所有的文本都在右側......而不必在裏面創建表？

2012-10-04 SF Developer

你只需要float（左或右）塊元素（如p aragraph）內的圖像：

<p> 
<img src="your-image"> 
Lorem ipsum dolor sit amet.... 
</p> 

p img { 
    float:left; 
    padding-right:10px; 
    padding-bottom:10px; 
}

Demo

來源

2012-10-04 07:52:12 Giona

你需要用一個div container和float數據您的div改爲right並給它一些寬度：

使用這些樣式將數據封裝在容器上div，你可以明顯地使一個類的後來：

<div style="width: 320px; text-align: justify; float: right;">

見這酒：Montecariano Valpolicella Classico Superiore Ripasso

My Fiddle

來源

2012-10-04 07:57:47

在這裏，我做了什麼，他們建議，但很明顯，你將需要改變的值。

http://jsfiddle.net/sXj2N/

來源

2012-10-04 08:01:53

所以這個解決方案將迫使我所有有相同的最小高度..是正確的？ –

如果你知道你的文字不會超過一定的長度，它會完美的工作。但是，正如你在jsfiddle上看到的那樣，當超過長度時，文本仍然向左偏移。我想爲你想要的，這將是合適的。 –

最快的解決辦法是設置下邊距的圖像上，以防止文本下下去。

更新：

.tdCell img, .image { 
    display: block; 
    float: left; 
    height: 400px; 
    padding-right: 20px; 
    vertical-align: middle; 
    width: 120px; 
    margin-bottom: 30px; 
}

來源

2012-10-04 08:47:58 Mark

所以我需要設置每個單獨的圖像..不同的高度，對不對？ –

我更新了我的答案，向你展示瞭如何輕鬆完成任務 – Mark

你並不需要創建表，標記和樣式的神會親切的眼光來看待你，如果你說，只要使用display: table-cell CSS語句。它會做你想做的，至少它是完美的現代和有效的方法之一。請記住，您的標記中有TABLE s，它決定了目的和意圖（例如，您正在處理數值表，例如數學表或其他科學表），並且您的標記具有table-cell樣式以使您的內容具有看看就像表一樣。換句話說，在HTML + CSS世界中，如果某件事物可能類似於您設備上的表格，那麼它就不會成爲表格。質疑那些會讓你相信桌子不好的人 - 他們本身並不壞。有什麼不好的是將TABLE標籤放入他們不屬於的文檔中。讓我們面對現實吧，平均約有5％的網站需要我們的表格。然而，使用表格式渲染來設置頁面樣式非常好。

<div style="height: 100%;"><!-- the children of this element will automatically occupy its entire height, courtesy of 'table-cell' rule. --> 
    <div style="display: table-cell"> 
     <img src="example.png" /> 
    </div> 
    <div style="display: table-cell"> 
     Quick brown fox jumps over the lazy dog. 
     <!-- Wall of text follows... --> 
    </div> 
</div>

文本「快速褐色......」將從未圍繞圖像的方式浮動元素有文字做。它會簡單地繼續向下，隨時保持圖像下的區域清晰。像表中的東西一樣。

來源

2012-10-04 09:02:41 amn

<div style="width:600px; float:left; height:auto;"> 
<div style="float:left; width:200px; background-color:red; display: table-cell">left container</div> 
<div style="float:left; width:200px; background-color:Green; display: table-cell">Mind container</div> 
<div style="float:left; width:200px; background-color:Black; display: table-cell">right container</div> 

</div>

來源

2012-10-04 09:21:10

回答

相關問題