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

HTML板块左右排列布局——左侧 DIV 固定宽度,右侧 DIV 自适应宽度,填充满剩余页面

我们可以借助CSS中的 float 属性来实现。

实例:

布局需求:

左侧 DIV 固定宽度,右侧 DIV 自适应宽度,填充满剩余页面。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=Edge"><title>title</title><style>.left {float: left;width: 300px;height: 300px;background-color: red;}.right {background-color: orange;margin-left: 310px;height: 300px;}</style></head><body><div class="left"></div><div class="right"></div></body>
</html>

http://www.lryc.cn/news/302046.html

相关文章:

  • 红旗linux安装32bit依赖库
  • Stable Diffusion教程——使用TensorRT GPU加速提升Stable Diffusion出图速度
  • NFTScan | 02.12~02.18 NFT 市场热点汇总
  • 使用 apt 源安装 ROCm 6.0.x 在Ubuntu 22.04.01
  • python函数的定义和调用
  • 【JVM篇】什么是类加载器,有哪些常见的类加载器
  • STM32—DHT11温湿度传感器
  • 相机图像质量研究(31)常见问题总结:图像处理对成像的影响--图像差
  • MySQL之select查询
  • Android MMKV 接入+ 替换原生 SP + 原生 SP 数据迁移
  • C#上位机与三菱PLC的通信07--使用第3方通讯库读写数据
  • LiveGBS流媒体平台GB/T28181常见问题-基础配置流媒体服务配置中本地|内网IP外网IP(可选)外网IP收流如何配置
  • 微服务- 熔断、降级和限流
  • 电路设计(20)——数字电子钟的multism仿真
  • 【论文阅读笔记】Contrastive Learning with Stronger Augmentations
  • 前端win10如何设置固定ip(简单明了)
  • 数据结构1.0(基础)
  • anomalib1.0学习纪实-续2:三个文件夹
  • 【递归】【后续遍历】【迭代】【队列】Leetcode 101 对称二叉树
  • Nginx https反向代理
  • zip解压缩
  • 电动五金工具行业调研:政策促进市场发展
  • 【矩阵】托普利茨矩阵
  • DS:八大排序之归并排序、计数排序
  • 由斐波那契数列探究递推与递归
  • 红队打靶练习:IMF: 1
  • 密码管理局以及什么是密评?为什么要做密评(商用密码应用安全性评估)?
  • 六、Datax通过json字符串运行
  • 关于数据库
  • 洛谷C++简单题小练习day14—闰年推算小程序