將表格佈局轉換爲Div

Question

我正在實現一個使用ASP.Repeater顯示每條評論的評論控件。評論本身目前使用表格來顯示一些圖片以在泡泡中顯示評論。

我知道桌子應該是設計佈局的惡作劇的縮影，而且瀏覽器的顯示效果確實很高，但我不確定如何將我的圓角放在正確的位置，並確保一切排隊。

有沒有人有任何建議，例子，所需HTML/CSS的黑客，或者我應該堅持表和希望最好？

Answer 1

我見過的創建使用DIV元素的圓角的最佳資源是一篇關於「A List Apart」的文章 - 請參閱http://alistapart.com/articles/customcorners/。如果您正在尋找使用DIV元素來佈局整個網站，那麼該網站上還有其他幾篇相關文章。請參閱：

http://alistapart.com/articles/slidingdoors/
http://www.alistapart.com/articles/slidingdoors2/
http://www.alistapart.com/articles/negativemargins/

Answer 2

有幾種不同的方式做rounded corners in CSS

我更喜歡使用CSS只要有可能，只是因爲我找到的代碼是一個更容易維護表，這聽起來像完美的範圍項目讓你的腳溼潤。

Answer 3

總之你會想是這樣的：

<style> 
    .start { background-image: url("topofbubble.png"); height: <heightofimage>; } 
    .end { background-image: url("bottomofbubble.png"); height: <heightofimage>; } 
    .body {background-image: url("sliceofbubblemiddle.png"); } 
</style> 

... 

<div class="comment"> 
    <span class="start"></span> 
    <span class="body">I would like to say that div layouts are far better than table layouts.</span> 
    <span class="end"></style> 
</div> 

這應該讓你開始。我沒有專門嘗試代碼，並且可以根據需要製作完整的示例。

Answer 4

如果你願意展示IE用戶尖角，圓角都與border-radius CSS屬性平凡解。目前沒有瀏覽器將其作爲基本屬性實現，但有幾個瀏覽器作爲前綴屬性。例如，要在Firefox中使用它，您可以使用屬性-moz-border-radius，用於Safari，使用-webkit-border-radius等。