左侧固定，右侧自适应

来源：动视网责编：小OO 时间：2020-11-27 18:53:06

左侧固定，右侧自适应

第一种方法。<；<。DOCTYPE>；<；html lang="；en"；>；<；head>；<；meta charset="；UTF-8"；>；<；title>；Document<；/title>；<；style>；.one {position： absolute；height： 200px；width： 300px；background-color： blue；}.two {height： 200px；margin-left： 300px；background-color： red；}<；/style>；<；/head>；<；body>；<；one"。

推荐度：

点击下载本文 文档为doc格式

导读第一种方法。<；<。DOCTYPE>；<；html lang="；en"；>；<；head>；<；meta charset="；UTF-8"；>；<；title>；Document<；/title>；<；style>；.one {position： absolute；height： 200px；width： 300px；background-color： blue；}.two {height： 200px；margin-left： 300px；background-color： red；}<；/style>；<；/head>；<；body>；<；one"。

本文主要介绍了左侧固定，右侧自适应的两种实现方法，相信对大家学习网页布局会有很好的帮助，下面就跟小编一起来看下吧

第一种方法：

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
position: absolute;
height: 200px;
width: 300px;
background-color: blue;
}
.two {
height: 200px;
margin-left: 300px;
background-color: red;
}
</style>
</head>
<body>
<p class="one"></p>
<p class="two">第一种方法</p>
</body>
</html>

第二种方法：

<!DOCTYPE>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.one {
float:left;
height: 200px;
width: 300px;
background-color: blue;
}
.two {
overflow: auto;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<p class="one"></p>
<p class="two">第二种方法</p>
</body>
</html>

更多左侧固定，右侧自适应相关文章请关注PHP中文网！

左侧固定，右侧自适应

推荐度：

点击下载本文 文档为doc格式

标签：固定左边右边

热门焦点

左侧固定，右侧自适应

左侧固定，右侧自适应

左侧固定，右侧自适应

最新推荐

猜你喜欢

热门推荐