您现在的位置是：网站首页> 编程资料编程资料

用CSS实现三列DIV等高布局以传达更好的视觉效果一文汇总 CSS 两列布局和三列布局的具体使用利用CSS3的flexbox实现水平垂直居中与三列等高布局CSS实现页面两列布局与三列布局的方法示例CSS三列布局的多种表现形式CSS三列布局两端固定宽度中间自适应CSS教程：三列固定网页布局实例详解CSS多种三列自适应布局实现

2021-09-06 896人已围观

简介页面布局中经常遇到等高布局的情况，为了得到更好的视觉效果，就要实现DIV等高布局的效果。以最普遍的DIV三列布局来说

页面布局中经常遇到等高布局的情况，特别是在拥有背景颜色或背景图片的情况下，为了得到更好的视觉效果，就要实现DIV等高布局的效果。以最普遍的DIV三列布局来说，想实现三列等高布局，可以借助“overflow”、“padding”和“margin”三个属性来实现。代码如下：

HTML代码：

复制代码

代码如下:

左侧

中间

右侧

CSS代码：

复制代码

代码如下:

#container{ overflow:hidden; width:1024px; margin:0 auto; }
#left, #center, #right { margin-bottom:-1000px; padding-bottom:1000px; }
#left { float:left; width:200px; background:#ccc; }
#center { float:left; width:400px; background:#bbeeeb; }
#right { float:right; width:200px; background:#555; }

上一篇：css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单纯CSS制作的响应式折叠菜单分享纯CSS实现圆角折叠菜单的方法CSS3实现的支持同时折叠多个菜单的手风琴菜单特效源码 CSS3实现的垂直手风琴折叠菜单特效源码jQuery/CSS3实现的可折叠侧边栏菜单特效源码基于CSS3实现的3D折叠展开动画菜单特效源码基于jquery+css3实现左右摇摆可滑动展开折叠圆形导航菜单纯css实现多级折叠菜单折叠树效果

下一篇：CSS失效怎么办？请检查网页最头部是否包含Doctype标签HTML网页头部代码实例详解HTML 网页头部代码全清楚网页头部css代码优化实例网页头部优化建议

您现在的位置是：网站首页> 编程资料编程资料

相关内容

点击排行

本栏推荐

猜你喜欢