学网络营销
上虎视学堂

您现在的位置: 主页 >  网站开发 >  DIV+CSS极速教学教程 >  3.3 DIV+CSS如何三列布局

张林

电子商务专业毕业,虎视学堂讲师,实战型网络营销高级讲师。主要擅长Photoshop图像设计创作,网站建设。

本课程视频

填写您的邮件地址,订阅我们的精彩内容:
学习数: 1556

  三列自适应宽度,一般常用的结构是左列和右列固定,中间列根据浏览器宽度自适应。下面在二列自适应宽度基础上修改一下。

  三列固定宽度可以在三列自适应基础上添加一个父div,并设置这个div的宽度即可,如下,添加一个id为content的父容器。

  在源代码里选中这三个div,然后点击工具栏上的“插入div标签”按钮,这时弹出的窗口插入项会默认为:在选定的内容旁换行,输入id为content,然后给这个div定义个宽度。

  三列固定宽度出来了,要想实现三列固定宽度居中就更方便了,只需设置#content {margin:0 auto;}即可。

  3像素bug是IE6的一个著名的bug,当浮动元素与非浮动元素相邻时,这个3像素的Bug就会出现。

  E6会在两个div中间加上3px的空隙,那么要解决这个问题,请在#side上加上_margin-right:-3px;记住,前边加上一下划线,这样这个样式专门针对IE6生效。IE7和FF下还会正常显示。



扫一扫微信二维码,即可收听最新教程。


微信扫一扫加好友
虎视学堂
  • 电话咨询

  • 0719-8877595