常见CSS页面架构

最新推荐文章于 2024-06-19 11:27:43 发布

清，纯一色

最新推荐文章于 2024-06-19 11:27:43 发布

阅读量71

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml

原文链接：http://www.cnblogs.com/KruceCoder/p/3546030.html

1. 左右固定，中间变化

CSS代码：

<style type="text/css">
.left{
  position: relative;
  width: 230px;
  float: left;
  margin: 0 -230px 0 0;
}
.left p, .right p{
  background-color: red;
}
.midd{
  float: left;
  width: 100%;
}

.midd .mic{
  margin: 0 200px 0 240px;
}
p{
  height: 150px;
  padding: 10px;
  color: #fff;
  background-color: #666;
}
.right{
  position: relative;
  float: right;
  width: 190px;
  margin: 0 0 0 -190px;
}
</style>

HTML代码

<div class="left">
    <p>左侧固定部分</p>
</div>
<div class="midd">
    <div class="mic">
        <p>中间自由扩展部分<p>
    </div>
</div>
<div class="right">
    <p>右侧固定部分</p>
</div>

同理可以得出右侧自适应：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>右侧自适应</title>
<style type="text/css">
    .left{
        position: relative;
        width: 230px;
        float: left;
        margin-right: 10px;
    }
    .midd{
        position: relative;
        width: 190px;
        float: left;
        margin-right: 10px;
    }
    .left p, .midd p{
        background-color: red;
    }
    .right{
        float: left;
        width: 100%;
        margin-left: -440px;
    }
    .rightc{
        margin-left: 440px;
    }
    p{
        height: 150px;
        padding: 10px;
        color: #fff;
        background-color: #666;
    }
</style>
</head>
<body>
    <div class="left">
        <p>左侧自适应</p>
    </div>
    <div class="midd">
        <p>中间定宽</p>
    </div>
    <div class="right">
        <div class="rightc">
            <p>右侧定宽</p>
        </div>
    <div>
</body>
</html>