将表格布局转换为 Div

StackOverflow https://stackoverflow.com/questions/92842

  •  01-07-2019
  •  | 
  •  

题

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

我知道表格应该是设计布局的邪恶缩影，并且在浏览器中显示起来非常昂贵，但我不太确定如何将圆角放在正确的位置并确保一切都对齐。

有没有人对所需的 HTML/CSS 有任何建议、示例、技巧，或者我应该坚持使用表格并希望得到最好的结果？

有帮助吗？

解决方案

我见过的使用 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/

其他提示

有几种不同的方法可以做到 CSS 中的圆角

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

简而言之，你会想要这样的东西：

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

这应该可以帮助你开始。我没有专门尝试代码，如果需要的话可以制作一个完整的示例。

如果您愿意向 IE 用户呈现尖角，则可以使用以下命令轻松解决圆角 border-radius CSS 属性。当前没有浏览器将其实现为基本属性，但有一些浏览器将其实现为前缀属性。例如，要在 Firefox 中使用它，您可以使用属性 -moz-border-radius, ，对于 Safari，使用 -webkit-border-radius, ， ETC。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top