简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > css教程 > 正文

左侧固定，右侧自适应

高洛峰
发布： 2017-02-24 13:39:04
原创
1131 人浏览过

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

第一种方法：

<!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中文网！

相关标签：
固定 自适应
来源：php.cn
上一篇：绝对定位元素的水平垂直居中的方法 下一篇：CSS3实现扇形动画菜单实例
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
Laravel 8 - 如何将 /{editable_text} 路由重定向到 /{user} 路由 我一直在尝试创建重定向路由来引导我访问用户个人资料。重定向路由应该是来自用户数据库的字符串/文本，并且应该重定向到相同的用户个人资料页面。例如，假设我的user1有名为“edita...
来自于 2024-04-06 17:26:11
0
1
410
调用 Chart.zoom() 后释放 X 轴：分步指南 我将滚动策略设置为setScrollStrategy(AxisScrollStrategies.progressive)，在加载的页面上，图表滚动得非常快，因为我的数据传入得很快。...
来自于 2024-04-04 23:40:56
0
1
1339
如何将自定义'css”和'js”文件有效地应用到一个应用程序中的所有管理员？ 我有自定义css和js文件、admin.py和覆盖的base.html位于templates/admin/app1/中，如下所示：django-project|-core||-se...
来自于 2024-04-03 20:54:06
0
1
400
CSS行类使某些元素超出框架，而它们应该是静态的并固定在显示器底部 目前我的页面如下所示。添加行类以使两个元素彼此相邻后，底部导航栏被向下推到我必须滚动的位置。在这里，您可以看到另一个没有行元素的页面，其中导航链接完美地粘在显示屏的底部（植物和房间...
来自于 2024-04-03 18:48:12
0
1
281
标题后带有扩展图标的自定义垫扩展 我正在尝试创建一个在for循环中具有垫子扩展面板的垫子手风琴。问题是，我需要进行一些自定义，例如在每个扩展前面添加一个复选框，并且扩展图标应放置在某些特定文本（在本例中为书名）之后...
来自于 2024-04-02 12:39:50
0
1
381
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！