css左右布局,左侧固定,右侧自适应
2024-10-15 07:53:55
实现布局的几种方法,见代码:
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.content{
width: 100%;
height: 50px;
border: solid 1px;
margin-top: 10px; }
.content div:first-child{
background: red;
height: 50px;
width:50px;
}
.content div:last-child{
background: green;
height: 50px;
}
</style>
</head>
<body>
<!--浮动-->
<div class="content" >
<div style="float: left;"></div>
<div style="margin-left: 50px;"></div>
</div>
<!--绝对定位-->
<div class="content" >
<div style="position: absolute"></div>
<div style="overflow:hidden;"></div>
</div>
<!--flex-->
<div class="content" style="display:flex;">
<div ></div>
<div style="flex-grow: 1"></div>
</div>
<!--表格-->
<table class="content" style="border-collapse: collapse;">
<tr>
<td style="width:50px;background:red;"></td>
<td style="background:green;"></td>
</tr>
</div>
</body>
</html>
最新文章
- [python] CSV read and write using module xlrd and xlwt
- 基于mysql的数据管理
- NodeJS(node.exe, npm, express, live-server)安装
- 必须使用";角色管理工具";安装或配置microsoft.net framework 3.5
- 2016年4月1日下午,《java入门123》翻开了第一页,从此走上不归路。新手初来乍到,献上见面礼
- Java集合——题目
- tableviewcell的这贴状态和传值总结
- C语言bool类型定义
- 10个CSS简写/优化技巧
- IIS中启用gzip压缩(网站优化)
- 关于selenium中的sendKeys()隔几秒发送一个字符
- python虚拟环境Virtualenvwrapper无法升降级虚拟环境软件解决方法
- BZOJ 2750: [HAOI2012]Road( 最短路 )
- IOS开发者证书申请及应用上线发布详解(2014版)
- Got minus one from a read call异常
- Docker File知识
- Elasticsearch入门之从零开始安装ik分词器
- iOS利用Application Loader打包提交到App Store时遇到错误The filename 未命名.ipa in the package contains an invalid character(s). The valid characters are:A-Z ,a-z,0-9,dash,period,underscore,but the name cannot start w
- linux nat style
- Raid 磁盘阵列
热门文章
- [Selenium] Java代码获取屏幕分辨率
- windows下 git+tortoiseGit的使用【转】
- Npoi List DataTable导出一个Excel多个sheet 下载
- Codeforces 766D Mahmoud and a Dictionary 2017-02-21 14:03 107人阅读 评论(0) 收藏
- php数组转成php编程代码
- Spring学习(六)——集成memcached客户端
- hbase zookeeper独立搭建
- jenkins任务构建失败重试插件Naginator Plugin
- .net core 使用 redis
- Git命令行学习积累