将表格布局转换为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等。