§ ITPOW >> 文档 >> CSS

CSS 布局简明教程-增加 margin 并解决 margin-left 兼容性问题

作者:vkvi 来源:ITPOW(原创) 日期:2011-2-26

前面分了两列,但列与列之间没有间距,看起来不美观,想有点间距。

我们想在 sideCol 与 mainCol 之间增加点间距,可以设置 sideCol 的右边距,也可以设置 mainCol 的左边距,我们这里设置 mainCol 的左边距。由于 mainCol 出让了 10px 的左边距,所以 width 要减去 10px,得 600px。

细心的朋友会发现,mainCol 还多了个 CSS 属性,就是 display:inline。这是为了解决 IE 中的错误边距问题解决的,IE 中采用一种错误的计算方式来显示左边距,造成实际的左边距多于指定的左边距,要解决这个可以指定 display:inline。请参见 IE 浮动边界 BUG 延伸探讨(不仅是双倍边距 margin-left)。有人说这不是让 div 和 img、span 这些标签一个级别了么?不怕,div 还 float 了的,float 了的 div display 会变成 block。

运行一下示例

 

相关文章