将表格布局转换为 Div

Posted 2023-03-17

【中文标题】将表格布局转换为 Div

【英文标题】：Converting Table Layout To Div

【发布时间】：2010-09-10 16:58:22

【问题描述】：

我正在实现一个使用 ASP.Repeater 来显示每个评论的评论控件。评论本身目前使用表格来显示，将一些图像划分为气泡中的评论。

我知道表格应该是设计布局的邪恶缩影，并且对于浏览器显示非常昂贵，但我不确定如何将圆角放置在正确的位置并确保所有内容都符合要求起来。

是否有人对所需的 html/CSS 有任何建议、示例、技巧，还是我应该坚持使用表格并希望获得最好的结果？

【参考方案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/

【参考方案2】：

rounded corners in CSS有几种不同的方法

我更喜欢尽可能使用 CSS 而不是表格，只是因为我发现代码更容易维护，而且这听起来像是一个具有完美范围的项目，可以让您涉足。

【讨论】：

CSS 表格有点矛盾。不是字面意义上的，而是逻辑意义上的。 CSS 设计应该只将表格用于表格数据，而不是用于内容定位。

【参考方案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>

这应该让你开始。具体代码我没试过，有需要可以做一个完整的例子。

【讨论】：

这是一个很好的建议，但不是我所需要的，因为宽度是可变的，所以每边都需要一条可以重复的中心线

是的，提供一个更好的例子对于这些问题总是一个好主意。 :) 如果它是流动的，它会变得更加复杂，你需要更多的 div。这是 CSS 设计中最难做的事情之一，但在大多数情况下是边缘情况。

【参考方案4】：

如果您愿意为 IE 用户呈现尖角，则可以使用 border-radius CSS 属性轻松解决圆角。目前没有浏览器将其实现为基本属性，但有几个浏览器将其作为前缀属性。例如，要在 Firefox 中使用它，您可以使用属性 -moz-border-radius，对于 Safari，使用 -webkit-border-radius 等。