两栏布局之右定宽左自适应，上定高下自适应，下定高上自适应
2024-05-12 05:06:10
这三种布局其实都是大同小异，今天就全部总结成一篇文章。
1.右定宽左自适应
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}.layout article > div{min-height: 100px;}</style>
</head>
<body><!-- float --><section class="layout float"><style>.layout.float .left{margin-right: 200px;background-color:red;}.layout.float .right{float: right;width: 200px;background-color: green;}</style><article><div class="right"></div><div class="left"></div></article></section><!-- position --><section class="layout position"><style>.layout.position{margin-top: 10px;}.layout.position .left{margin-right: 200px;background-color:red;}.layout.position .right{position: absolute;right: 0;background-color: green;width: 200px;}</style><article><div class="right"></div><div class="left"></div></article></section><!-- flex --><section class="layout flex"><style>.layout.flex{margin-top: 10px;}.layout.flex article{display: flex;}.layout.flex .left{flex: 1;background-color:red;}.layout.flex .right{background-color: green;width: 200px;}</style><article><div class="left"></div><div class="right"></div></article></section><!-- grid --><section class="layout grid"><style>.layout.grid{margin-top: 10px;}.layout.grid article{display: grid;grid-template-columns: auto 200px;}.layout.grid .left{background-color:red;}.layout.grid .right{background-color: green;}</style><article><div class="left"></div><div class="right"></div></article></section><!-- table --><section class="layout table"><style>.layout.table{margin-top: 10px;}.layout.table article{display: table;height: 100px;width: 100%;}.layout.table .left{display: table-cell;background-color:red;}.layout.table .right{display: table-cell;background-color: green;width: 200px;}</style><article><div class="left"></div><div class="right"></div></article></section>
</body>
</html>2.上定高下自适应
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}html, body{height: 100%;}.layout{height: 100%;}.layout article > div{min-width: 100px;}</style>
</head>
<body><!-- flex --><section class="layout flex"><style>.layout.flex article{height: 100%;width: 100px;display: flex;flex-direction: column;}.layout.flex .top{height: 100px;background-color: red;}.layout.flex .bottom{flex: 1;background-color: green;}</style><article><div class="top"></div><div class="bottom"></div></article></section><!-- absolute --><section class="layout absolute"><style>.layout.absolute{margin-left: 200px;}.layout.absolute article{height: 100%;width: 100px;}.layout.absolute .top{height: 100px;background-color: red;position: absolute;top: 0;}.layout.absolute .bottom{background-color: green;position: absolute;bottom: 0;top: 100px;}</style><article><div class="top"></div><div class="bottom"></div></article></section><!-- grid --><section class="layout grid"><style>.layout.grid{margin-left: 200px;}.layout.grid article{height: 100%;width: 100px;display: grid;grid-template-rows: 100px auto;}.layout.grid .top{height: 100px;background-color: red;}.layout.grid .bottom{background-color: green;}</style><article><div class="top"></div><div class="bottom"></div></article></section><!-- table --><section class="layout table"><style>.layout.table{margin-left: 200px;}.layout.table article{height: 100%;width: 100px;display: table;}.layout.table .top{height: 100px;background-color: red;display: table-row;}.layout.table .bottom{display: table-row;background-color: green;}</style><article><div class="top">1</div><div class="bottom">2</div></article></section>
</body>
</html>3.下定高上自适应
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}html, body{height: 100%;}.layout{height: 100%;}.layout article > div{min-width: 100px;}</style>
</head>
<body><!-- flex --><section class="layout flex"><style>.layout.flex article{height: 100%;width: 100px;display: flex;flex-direction: column;}.layout.flex .top{flex: 1;background-color: red;}.layout.flex .bottom{height: 100px;background-color: green;}</style><article><div class="top"></div><div class="bottom"></div></article></section><!-- absolute --><section class="layout absolute"><style>.layout.absolute{margin-left: 200px;}.layout.absolute article{height: 100%;width: 100px;}.layout.absolute .top{background-color: red;position: absolute;top: 0;bottom: 100px;}.layout.absolute .bottom{background-color: green;height: 100px;position: absolute;bottom: 0;}</style><article><div class="top"></div><div class="bottom"></div></article></section><!-- grid --><section class="layout grid"><style>.layout.grid{margin-left: 200px;}.layout.grid article{height: 100%;width: 100px;display: grid;grid-template-rows: auto 100px;}.layout.grid .top{background-color: red;}.layout.grid .bottom{height: 100px;background-color: green;}</style><article><div class="top"></div><div class="bottom"></div></article></section><!-- table --><section class="layout table"><style>.layout.table{margin-left: 200px;}.layout.table article{height: 100%;width: 100px;display: table;}.layout.table .top{background-color: red;display: table-row;}.layout.table .bottom{height: 100px;display: table-row;background-color: green;}</style><article><div class="top">1</div><div class="bottom">2</div></article></section>
</body>
</html>两栏布局之右定宽左自适应，上定高下自适应，下定高上自适应相关推荐
- CSS两栏布局之右栏布局
右栏的主内容区包含页眉.正文和页脚三个部分.正文的内容将在11.3节介绍,这里只介绍页眉和页脚的布局. 页眉包括两部分内容,左侧提供"文档结构视图"复选框,小屏幕用户可以通过该复选 ...
- 通过宽高自适应设计两栏布局和三栏布局
1.两栏布局 我们要实现下面这样一个东西:两栏,左边一栏,右边一栏,左边宽高固定,右边宽高自适应,见下图: ✍我们有两种解决办法:(1)给右边盒子加外边距(2)calc函数的运用 第一种方法:(1)给 ...
- 两栏布局，三栏布局，等高布局，流式布局
读前笑一笑: 我前面一女生平胸,然后我问她哪天你晚上自己回家,被劫色怎么办-? 她淡淡的回了句:"我就脱了上衣,然后说,别激动,是自己人"--自己人--己人-人- 两栏布局: 1. ...
- css label 居中布局_HTMLCSS精华知识点——表单元素、BFC、两栏布局、居中总结等...
HTML&CSS精华知识点--第九节 一.input表单元素 一系列元素,主要用于收集用户数据 1.type属性表示输入框类型text:普通文本输入框 date,日期选择框,兼容性问题 sea ...
- css布局：table布局、两栏布局、三栏布局
一.最初的布局--table 最初的时候,网页简单到可能只有文字和链接.这时候,大家最常用的就是table.因为table可以展示出多个块的排布.这种布局现在应该不常用了,因为在形色单一时,使用起来方 ...
- CSS 经典布局（两栏布局 + 三栏布局 + 圣杯布局 + 双飞翼布局）
两栏布局(左列定宽, 右列自适应) DOM结构 <div class="box"><div class="box-left"></ ...
- CSS多栏布局-两栏布局和三栏布局
目录 前言 ------两栏布局 一.左列定宽,右列自适应 1.浮动+margin 2.浮动+BFC 3.定位 4.flex 5.浮动+负外边距 6.table布局 二.左列不定宽,右列自适应 1.f ...
- 前端两栏布局和三栏布局
两栏布局 左边盒子定宽度右边盒子自适应 [浮动➕ marin实现] <div class="twoContain"><div class="twoCon ...
- css浮动布局自适应,CSS | 自适应两栏布局方法
html代码: 固定宽度 自适应区域 1.浮动+margin 第一种: 左侧栏固定宽度向左浮动,右侧主要内容则用margin-left留出左侧栏的宽度,默认宽度为auto,自动填满剩下的宽度. .le ...
最新文章
- 从芯片巨头沦落到收购对象 高通是怎样失去魔力的？
- [C# 网络编程系列]专题六：UDP编程
- obs可以推到中转服务器吗,[经验分享]OBS 如何实现多路推流
- python处理mysql数据结构_python环境下使用mysql数据及数据结构和二叉树算法（图）...
- 世界上最诡异的画，到底为何让无数人闻风丧胆？
- 《Python Cookbook 3rd》笔记（2.14）：合并拼接字符串
- 阿里开源！轻量级深度学习端侧推理引擎 MNN
- jquery中的css函数css(name)、css(key,value)、css(properties)、css(key,fn)
- js获取浏览器信息以及判断是否是微信
- git管理工具从网上检索下来的项目没有绿色对勾
- 多缝夫琅禾费衍射matlab,用matlab实现夫琅禾费多缝衍射代码
- 鼠标右键中新建选项消失
- 高一计算机课期中考试总结反思,期中考试总结与反思（精选25篇）
- rs422串口通讯c语言程序,RS232C/RS422/RS485串行通信标准
- 脚本：自动下载安卓应用并安装到手机
- 一种解决退出远程桌面后，电脑自动睡眠的方法
- 怎么修复linux受损文件,Linux文件数据损坏的快速修复办法-文件或目录损坏且无法读取...
- 使用JavaWeb实现多多自走棋羁绊生成
- 淘宝新店如何推广效果比较好？有哪些渠道？
- 洛谷 T284709 怨念（resent）