DIV+CSS 三栏布局实例代码

ttx9n · 发表于 2012-6-14 12:55:04

DIV+CSS 三栏布局实例代码，主要是用了position:absolute 1.要求：如上图中的，三栏目布局，中间的MAIN是自适应浏览器的宽度，左LEFT固定宽200PX，右RIGHT固定宽200PX;

复制代码代码如下:
.right,.left{height:300px;width:200px;}
.right{ float:right;background:#000000;}
.left{ float:left;background:#009933;}
.main{background:#F60; height:300px;}
<div class="right">RIGHT</div>
<div class="left">LEFT</div>
<div class="main">MAIN</div>

2.现在要求先加载MIAN，其它要求同上面一样;
总结：主要是利用浮动元素的负外边距;
　　并且要理解float和绝对定位，这两种元素的宽度都是根据内容的宽度来的。
　　相对定位和块级元素，如果不设定宽，都是100%(相对于父级的宽)

复制代码代码如下:
.boxmain{float:left;margin-right:-200px;width:100%;}
.right,.left{height:300px;width:200px; z-index:1;}
.right{ position:absolute; right:0; background:#000000;}
.left{position:absolute;left:0; background:#009933;}
.main{margin-right:200px;background:#F60; height:300px;margin-left:200px;}
<div class="boxmain">
<div class="main">main</div>
</div>
<div class="left">LEFT</div>
<div class="right">RIGHT</div>

完整代码：

提示：您可以先修改部分代码再运行

溪谷玉贤 · 发表于 2022-8-16 16:53:14

人都不在了啊啊

溪谷玉贤 · 发表于 2022-11-12 20:50:38

数据库了多久撒快乐的健身卡啦

hd1tvqb3 · 发表于 2023-2-6 05:07:53

数据库了多久撒快乐的健身卡啦

5ble0ks · 发表于 2023-8-11 04:29:09

而非为吾问无为谓娃娃

白狐软件 · 发表于 2023-9-11 23:35:26

66666666666666666666

vir5051 · 发表于 2024-5-14 23:49:44

搞个免费的用用

sykzus · 发表于 2024-6-12 07:26:08

加快速度很快就撒谎

mkonji · 发表于 2024-7-5 19:54:11

谢谢小Y分享

7jbiiz · 发表于 2024-7-23 16:12:09

啦啦啦啦啦啦哈哈哈

账号		自动登录	找回密码
密码			立即注册

[CSS] DIV+CSS 三栏布局实例代码

相关帖子