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等。

将表格布局转换为Div

4 个答案: