代码之家 › 专栏 › 技术社区 › Andrew Burgess

将表格布局转换为DIV

layout css html

Andrew Burgess · 技术社区 · 17 年前

我正在实现一个使用ASP.Repeater显示每个注释的注释控件。注释本身当前使用一个表格来划分一些图像以在气泡中显示注释。

我知道表格在设计布局上是邪恶的缩影,在浏览器上显示非常昂贵,但我不确定如何将圆角放在正确的位置,并确保所有东西都对齐。

是否有人对所需的HTML/CSS有任何建议、示例、黑客攻击,或者我应该坚持使用表并希望得到最好的结果?

4 回复 | 直到 17 年前

Steve Moyer 17 年前

我所看到的使用DIV元素创建圆角的最佳资源是一篇关于“列表分离”的文章-请参阅 http://alistapart.com/articles/customcorners/ . 如果您希望使用DIV元素来布局整个站点,那么该站点上还有其他几个相关的文章。见:

http://alistapart.com/articles/slidingdoors/
http://www.alistapart.com/articles/slidingdoors2/
http://www.alistapart.com/articles/negativemargins/

Community Mohan Dere 9 年前

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

我喜欢尽可能地使用CSS而不是表格,因为我发现代码更容易维护,而且这听起来像是一个有着完美范围的项目,可以让你的脚湿透。

Doug Moore 17 年前

简而言之,你想要这样的东西:

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

你应该开始了。我没有具体地尝试代码,如果需要的话,我可以做一个完整的例子。

Ulf Gjerdingen angelo.mastro 10 年前

如果您愿意向IE用户展示尖角,则圆角可以通过 border-radius CSS属性。当前没有任何浏览器将其实现为基属性,但有几个浏览器将其作为前缀属性。例如,要在firefox中使用它,您需要使用属性 -moz-border-radius ,用于狩猎,使用 -webkit-border-radius 等。