左侧固定宽度，右侧自适应宽度的CSS布局

ttx9n · 发表于 2010-2-23 16:19:29

这个是我练习做网页查资料查到的，有很多不错的布局。将其总结，并写上自己使用的一些感悟。第一种方法：
关于这个布局，作者是这样说明的：“left和right都贴住左侧。设置left在right上面(z-index)；在right内加个放内容的层(content)；设置content距离right的左侧为200px，即刚巧等于left的宽度。”
这个布局有一个缺点就是，如果我设置了foot的div，试了很多办法，都不能根据content的高度，连着中间的内容，自动置于HTML页面的底部。如有牛人知道解决方法，望留言解答。

复制代码代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
* {margin:0; padding:0; list-style:none; }
.header{ width:100%;height:250px;background-color:#33FF00;}
.logo{width:100%;height:200px;background-color:#330000;}
.nav{width:100%;height:50px;background-color:#660000;}
.wrapper {width: 100%; }
.left {width:200px; height:auto;background:#fcc; position:absolute; left:0;z-index:1;}
.right {width:100%; height:400px;background:#ccc; position:absolute; left:0;}
.content {height:400px;margin-left:200px; background:#ffc; }
.foot { position:absolute;height:100px;background-color:#000000;bottom:0;}
.foot h1, .foot p{color:#FFFFFF;}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="left">
<h1>Left</h1>
<p>左侧固定宽度200px</p>
</div>
<div class="right">
<div class="content">
<h1>Content</h1>
<p>右侧宽度自动适应</p>
</div>
</div>
<div class="foot">
<h1>Foot</h1>
<p>想看看他的位置会在哪？</p>
</div>
</div>
</body>
</html>

cxst1h57 · 发表于 2023-1-2 05:14:24

非常vbcbvcvbvcb

hd1tvqb3 · 发表于 2023-2-22 14:39:01

2222222222222222

plvo189 · 发表于 2023-8-23 21:26:18

额风风风微风微风违法

u7yxn9 · 发表于 2023-9-14 20:24:17

管灌灌灌灌灌灌灌灌灌灌

uj9lpc · 发表于 2023-9-23 20:11:17

额UI废物iuhfujewfiewnnfen

4k0mp7m · 发表于 2023-10-19 07:47:20

2222222222222222

idy6_yus · 发表于 2023-11-26 20:26:53

的谁vdvdsvdsvdsdsv

z80vh · 发表于 2023-12-7 19:02:43

你们谁看了弄洒了可能

plvo189 · 发表于 2024-8-3 06:40:43

呵呵呵呵呵呵

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

[CSS] 左侧固定宽度，右侧自适应宽度的CSS布局

相关帖子