当前位置: 首页 > news >正文

直播软件怎么开发,自适应两栏布局方式 - 云豹科技


直播软件怎么开发,自适应两栏布局方式

html结构

  <body><div class="wrapper"><div class="left"></div><div class="right"></div></div></body>

方法一:flex布局

.wrapper{display:flex;
}
.left{width:200px;height:400px;background:black;
}
.right{flex:1;height:400px;background:red;
}

方法二:浮动

.left{float:left;width:200px;height:400px;background:black;
}
.right{background:red;height:400px;
}

方法三:BFC

.left{width:200px;height:400px;float:left;background:black;
}
.right{overflow:hidden;height:400px;background:red;
}

方法四:position绝对定位

.wrapper{position:relative;
}
.left{width:200px;height:400px;background:black;
}
.right{position:absolute;top:0;left:200px;right:0;bottom:0;background:red;
}

方法五:table布局

.wrapper{display:table;width:100%;
}
.left,.right{display:table-cell;height:400px
}
.left{background:black;
}
.right{background:red;
}

方法六:grid布局

.wrapper{display:grid;width:100%;height:400px;grid-template-columns:200px auto;
}
.left{background:black;
}
.right{background:red;
}

以上就是直播软件怎么开发,自适应两栏布局方式, 更多内容欢迎关注之后的文章

http://www.hskmm.com/?act=detail&tid=10429

相关文章:

  • resultMap和自定义映射结果形式(ResultMapManage)以及ResultMap Vs ResultType
  • 嵌入式设备不能正常上网问题
  • 2、论文固定模板(背景过度结尾)
  • go: 图片文件上传
  • go: 生成缩略图
  • git: 报错: fatal: 协议错误:错误的行长度字符串:This 或 fatal: protocol error: bad line length character: This
  • jquery: Justified gallery
  • 安装crmeb
  • gin: 用zap记录访问日志
  • gin: 打包模板文件、静态文件到二进制文件中
  • gin: 判断是否ajax请求
  • gin: 静态文件
  • 详细介绍:【论文精读】基于YOLOv3算法的高速公路火灾检测
  • MacOS 下fuzz学习踩坑点
  • An Empirical Study on Commit Message Generation using LLMs via In-Context Learning 论文笔记
  • 实用指南:人工智能学习:Transformer结构中的编码器层(Encoder Layer)
  • vcpkg 安装依赖
  • Java03课前问题列表
  • JavaScript错误处理完全指南:从基础到自定义错误实战
  • 1、论文准备
  • PION 游击
  • Web3 开发者修炼全图谱:从 Web2 走向 Web3 的实用的系统性学习指南
  • 实用指南:医院高值耗材智能化管理路径分析(下)
  • Flutter应用自动更新系统:生产环境的挑战与解决方案
  • .NET Core中使用SignalR
  • 实用指南:修复Conda连接异常:CondaHTTPError HTTP 000 CONNECTION FAILED故障排除指南
  • 高级数据结构手册
  • Tarjan 学习笔记
  • 使用JavaScript和CSS创建动态高亮导航栏
  • Gridspech 全通关