提问人：Andrew Burgess 提问时间：9/18/2008 更新时间：6/2/2016 访问量：2177
将表格布局转换为 Div
Converting Table Layout To Div
问：
我正在实现一个使用 ASP 的注释控件。中继器显示每个注释。评论本身目前使用表格显示，以划分一些图像以在气泡中显示评论。
我知道表格应该是设计布局邪恶的缩影，而且为浏览器显示成本非常高，但我不确定如何将圆角放在正确的位置并确保所有内容都对齐。
有没有人对所需的 HTML/CSS 有任何建议、示例和技巧，或者我应该坚持使用表格并希望得到最好的结果？
答：
1赞
Wayne
9/18/2008
#1
在 CSS 中，有几种不同的方法可以做圆角
我更喜欢尽可能使用CSS来表，只是因为我发现代码更容易维护，这听起来像是一个具有完美范围的项目，可以让你的脚湿透。
评论
0赞
Doug Moore
9/18/2008
CSS表格有点矛盾。不是字面意义上的，而是逻辑意义上的。CSS设计应该只使用表格数据，而不是内容定位。
0赞
Doug Moore
9/18/2008
#2
简而言之，你会想要这样的东西：
<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>
这应该让你开始。我没有专门尝试代码，如有必要，可以制作一个完整的示例。
评论
0赞
Andrew Burgess
9/18/2008
这是一个很好的建议，但并不完全是我需要的，因为宽度是流动的，每边都需要有一条可以重复的中心线
0赞
Doug Moore
9/18/2008
是的，对于这些问题，提供更好的例子总是一个好主意。:)如果它是流动的，它会变得更加复杂，你需要更多的 div。这是CSS设计中最难做的事情之一，但在大多数情况下是一个边缘情况。
4赞
Steve Moyer
9/18/2008
#3
我见过的使用 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/
0赞
Xanthir
2/18/2009
#4
如果您愿意向 IE 用户展示尖角，那么圆角是可以用 CSS 属性轻松求解的。目前没有浏览器将其实现为基本属性，但有几个浏览器将其实现为前缀属性。例如，要在 firefox 中使用它，您将使用 、 for Safari 的属性、use 等。border-radius-moz-border-radius-webkit-border-radius
评论