查看: 19|回复: 0

HTML中左边固定大小，右边自适应

1559 主题	1565 帖子	2380 积分

管理员

Rank: 9 Rank: 9 Rank: 9

积分: 2380

发消息

发表于前天 21:21 | 显示全部楼层 |阅读模式

HTML中左边固定大小，右边自适应
下面是一个简单的 HTML 示例，左边是固定大小，右边自适应，并且右边包含一个表格。表格自适应改变大小。
### 示例代码

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定大小和自适应布局</title>
<style>
body {
display: flex; /* 使用flex布局 */
margin: 0; /* 去掉默认边距 */
height: 100vh; /* 设置高度为视口高度 */
}
.left {
width: 200px; /* 左边固定宽度 */
background-color: #f0f0f0; /* 左边背景颜色 */
padding: 10px; /* 内边距 */
box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* 添加阴影 */
}
.right {
flex-grow: 1; /* 右边自适应 */
padding: 10px; /* 内边距 */
overflow: auto; /* 超出部分显示滚动条 */
}
table {
width: 100%; /* 表格宽度100% */
border-collapse: collapse; /* 合并边框 */
}
th, td {
border: 1px solid #ccc; /* 单元格边框 */
padding: 8px; /* 单元格内边距 */
text-align: left; /* 左对齐 */
}
th {
background-color: #f2f2f2; /* 表头背景颜色 */
}
</style>
</head>
<body>
<div class="left">
<h2>左侧固定区域</h2>
<p>这里是左侧的内容。</p>
</div>
<div class="right">
<h2>右侧自适应区域</h2>
<div style="max-height: 400px; overflow-y: auto;">
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>项目A</td>
<td>这是项目A的描述。</td>
</tr>
<tr>
<td>2</td>
<td>项目B</td>
<td>这是项目B的描述。</td>
</tr>
<tr>
<td>3</td>
<td>项目C</td>
<td>这是项目C的描述。</td>
</tr>
<tr>
<td>4</td>
<td>项目D</td>
<td>这是项目D的描述。</td>
</tr>
<tr>
<td>5</td>
<td>项目E</td>
<td>这是项目E的描述。</td>
</tr>
<tr>
<td>6</td>
<td>项目F</td>
<td>这是项目F的描述。</td>
</tr>
<tr>
<td>7</td>
<td>项目G</td>
<td>这是项目G的描述。</td>
</tr>
<tr>
<td>8</td>
<td>项目H</td>
<td>这是项目H的描述。</td>
</tr>
<tr>
<td>9</td>
<td>项目I</td>
<td>这是项目I的描述。</td>
</tr>
<tr>
<td>10</td>
<td>项目J</td>
<td>这是项目J的描述。</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

复制代码

### 代码说明
1. **布局**：
- 使用  `flex`  布局来实现左边固定大小，右边自适应的效果。
- 左侧区域宽度固定为 200px，右侧区域使用  `flex-grow: 1`  使其自适应剩余空间。
2. **表格**：
- 表格宽度设置为 100%，并使用  `border-collapse`  合并边框。
- 在右侧区域中，表格被放置在一个最大高度为 400px 的  `div`  中，当内容超出时会显示滚动条。
3. **样式**：
- 为左侧和右侧区域添加了一些基本的样式，例如背景色、内边距和边框样式。
你可以将上述代码复制到一个  `.html`  文件中，然后在浏览器中打开，查看效果。

适应, 表格, 大小, 右边, 一个

相关帖子

扫码关注微信公众号，及时获取最新资源信息！【下载附件优惠：VIP会员5折；永久VIP免费】

返回列表

免责声明：
1、本站提供的所有资源仅供参考学习使用，版权归原著所有，禁止下载本站资源参与商业和非法行为，请在24小时之内自行删除！
2、本站所有内容均由互联网收集整理、网友上传，并且以计算机技术研究交流为目的，仅供大家参考、学习，请勿任何商业目的与商业用途。
3、若您需要商业运营或用于其他商业活动，请您购买正版授权并合法使用。
4、论坛的所有内容都不保证其准确性，完整性，有效性，由于源码具有复制性，一经售出，概不退换。阅读本站内容因误导等因素而造成的损失本站不承担连带责任。
5、用户使用本网站必须遵守适用的法律法规,对于用户违法使用本站非法运营而引起的一切责任，由用户自行承担
6、本站所有资源来自互联网转载，版权归原著所有，用户访问和使用本站的条件是必须接受本站“免责声明”，如果不遵守，请勿访问或使用本网站
7、本站使用者因为违反本声明的规定而触犯中华人民共和国法律的，一切后果自己负责，本站不承担任何责任。
8、凡以任何方式登陆本网站或直接、间接使用本网站资料者，视为自愿接受本网站声明的约束。
9、本站以《2013 中华人民共和国计算机软件保护条例》第二章 “软件著作权” 第十七条为原则：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。若有学员需要商用本站资源，请务必联系版权方购买正版授权！
10、本网站如无意中侵犯了某个企业或个人的知识产权，请来信【站长信箱312337667@qq.com】告之，本站将立即删除。
郑重声明：
本站所有资源仅供用户本地电脑学习源代码的内含设计思想和原理，禁止任何其他用途！
本站所有资源、教程来自互联网转载，仅供学习交流，不得商业运营资源，不确保资源完整性，图片和资源仅供参考，不提供任何技术服务。
本站资源仅供本地编辑研究学习参考，禁止未经资源商正版授权参与任何商业行为，违法行为！如需商业请购买各资源商正版授权
本站仅收集资源，提供用户自学研究使用，本站不存在私自接受协助用户架设游戏或资源，非法运营资源行为。

|免责声明|小黑屋|依星资源网 ( 鲁ICP备2021043233号-3 )|网站地图

GMT+8, 2024-9-4 22:12

Powered by Net188.com X3.4

邮箱：312337667@qq.com 客服QQ：312337667（工作时间：9：00~21：00）

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