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

在 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-radiusCSS 属性轻松解决。目前没有浏览器将其实现为基本属性，但有一些浏览器将其作为前缀属性。例如，要在 Firefox 中使用它，您可以使用属性-moz-border-radius，对于 Safari，使用-webkit-border-radius等。