div上固定,下自适应;div左固定,右自适应
一,上固定,下自适应
1,代码
<div class="all">
<div class="top">111</div>
<div class="center">222</div></div>
<style>
.all {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.top {
width: 100%;height: 100px;
background-color: #1ab394;
}
.center {
width: 100%;
flex: 1;
background-color: #1c84c6;
}
</style>
2,图例
二,下固定,上自适应
1,代码
<div class="all">
<div class="top">111</div>
<div class="center">222</div></div>
<style>
.all {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.top {
width: 100%;
flex: 1;
background-color: #1c84c6;
}
.center {
width: 100%;
height: 100px;
background-color: #1ab394;
}
</style>
2,图例
三,上下固定,中间自适应
1,代码
<div class="all">
<div class="top">111</div>
<div class="center">222</div>
<div class="bottom">333</div></div>
<style>
.all {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.top {
width: 100%;
height: 100px;
background-color: #1ab394;
}
.center {
width: 100%;
flex: 1;
background-color: #1c84c6;
}
.bottom{
width: 100%;
height: 100px;
background-color: #13ce66;
}
</style>
2,图例
四,左固定,右自适应
1,代码
1.1,float布局
<div class="all">
<div class="left">111</div>
<div class="right">222</div></div>
<style>
.all {
width: 100%;
height: 100%;
}
.left {
width: 320px;
height: 100%;
float: left;background: #409EFF;
}
.right {
width: 100%;
height: 100%;
background: #008489;
}
</style>
1.2,flex布局
<div class="all">
<div class="left">111</div>
<div class="right">222</div></div>
<style>
.all {
width: 100%;
height: 100%;
display: flex;}
.left {
width: 320px;
height: 100%;
flex:none;background: #409EFF;
}
.right {
width: 100%;
height: 100%;
flex:1;
background: #008489;
}
</style>
1.3,table布局
<div class="all">
<div class="left">111</div>
<div class="right">222</div></div>
<style>
.all {
width: 100%;
height: 100%;
display: table;
}
.left {
width: 320px;
height: 100%;
display:table-cell;
background: #409EFF;
}
.right {
height: 100%;
display:table-cell;
background: #008489;
}
</style>
1.4,calc布局
<div class="all">
<div class="left">111</div>
<div class="right">222</div></div>
<style>
.all {
width: 100%;
height: 100%;
display: table;
}
.left {
width: 320px;
height: 100%;
float:left;
background: #409EFF;
}
.right {
height: 100%;
float:right;
width:calc(100% - 320px);
background: #008489;
}
</style>
1.5,margin-left布局
<div class="all">
<div class="left">111</div>
<div class="right">222</div></div>
<style>
.all {
width: 100%;
height: 100%;
display: table;
}
.left {
width: 320px;
height: 100%;
float:left;
background: #409EFF;
}
.right {
height: 100%;
width:auto;
margin-left:320px;
background: #008489;
}
</style>
2,图例
五,综合
1,仿网站布局1
先左固定,右自适应;再上下固定,中自适应
<div class="all">
<div class="left">111</div>
<div class="right">
<div class="right-top">222</div>
<div class="right-center">333</div>
<div class="right-bottom">444</div>
</div>
</div>
<style>
.all {
width: 100%;
height: 100%;
}
.left {
width: 320px;
height: 100%;
float: left;
background: #409EFF;
}
.right {
height: 100%;
width: auto;
margin-left: 320px;
background: #008489;
display: flex;
flex-direction: column;
}
.right-top {
width: 100%;
height: 100px;
background-color: #1ab394;
}
.right-center {
width: 100%;
flex: 1;
background-color: #1c84c6;
}
.right-bottom {
width: 100%;
height: 100px;
background-color: #13ce66;
}
</style>
2,仿网站布局2
先上固定,下自适应;再左固定,右自适应
<div class="all">
<div class="top">111</div>
<div class="center">
<div class="left">222</div>
<div class="right">333</div>
</div>
<div class="bottom">444</div>
</div>
<style>
.all {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.top {
width: 100%;
height: 100px;
background-color: #1ab394;
}
.center {
width: 100%;
flex: 1;
background-color: #1c84c6;
}
.bottom {
width: 100%;
height: 100px;
background-color: #13ce66;
}
.left {
width: 320px;
height: 100%;
float: left;
background: #409EFF;
}
.right {
height: 100%;
width: auto;
margin-left: 320px;
background: #008489;
}
</style>
如图所示
3,仿XShell页面布局
先上固定,下自适应;再左固定,右自适应;最后左上自适应,左下固定
<div class="all">
<div class="top">111</div>
<div class="center">
<div class="left">
<div class="left-top">222</div>
<div class="left-bottom">333</div>
</div>
<div class="right">444</div>
</div>
<div class="bottom">555</div>
</div>
<style>
.all {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.top {
width: 100%;
height: 100px;
background-color: #1ab394;
}
.center {
width: 100%;
flex: 1;
background-color: #1c84c6;
}
.bottom {
width: 100%;
height: 100px;
background-color: #13ce66;
}
.left {
width: 320px;
height: 100%;
float: left;
background: #409EFF;
display: flex;
flex-direction: column;
}
.right {
height: 100%;
width: auto;
margin-left: 320px;
background: #008489;
}
.left-top {
width: 100%;
flex: 1;
background-color: #1c84c6;
}
.left-bottom {
width: 100%;
height: 100px;
background-color: #1ab394;
}
</style>
div上固定,下自适应;div左固定,右自适应的更多相关文章
- 用于阻止div上的事件和div上的按钮的事件同时触发
event.stopPropagation() 阻止事件冒泡 用于ie11以上
- html同行两个div浮动后下一个div怎么换行的问题
传送门:https://blog.csdn.net/asdfg6541/article/details/78514535
- DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度
一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...
- Django循环创造div后,对各个div操作后触发事件,传递数据(Django九)
前面我用for循环创建了div,每个div中有各自的数据以及同样的布局 效果图如下:部分代码如下: 现在,我希望在点击每个div里的发表按钮时,能在js里获取{{problem.pro_id}}以及{ ...
- Jquery的鼠标移动上去显示div,鼠标离开的时候隐藏div效果
有时候我们需要这个效果:当鼠标放上去的时候显示一个div,当鼠标移走的时候就将div隐藏了.代码如下,记得引入Jquyer库.(当鼠标移动到id=menu的div上的时候,显示id=list的div, ...
- 剑指Offer - 九度1523 - 从上往下打印二叉树
剑指Offer - 九度1523 - 从上往下打印二叉树2013-12-01 00:35 题目描述: 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 输入: 输入可能包含多个测试样例,输入以E ...
- 论气机之"左升右降"
生命现象源于气机的出入升降运动. “出入废则神机化灭,升降息则气立孤危.故非出入,则无以生长壮老已:非升降,则无以生长化收藏”(<素问·六微旨大论>),升降是气机主要的运动形式之一,是 ...
- 上中下三个DIV,高度自适应(上高度固定,下固定,中间自适应)(代码来自X人)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DivDemo.aspx.c ...
- css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style
css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style .con1{ width: 100p ...
- xHTML+div布局:三个div,两边div宽度固定,中间div宽度自适应
xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应. 和大家分享一个实现方式: 1.html代码 <div class="dyleft"> ...
随机推荐
- python 文件查找及截取字符串 (替换,分割) demo
#"F:\\test.txt" ''' # 例1:字符串截取 str = '12345678' print str[0:1] # 例2:字符串替换 str = 'akakak' s ...
- nginx web服务器应用(虚拟主机 日志 rewrite location https)
Nginx介绍 Nginx是一个开源的,支持高性能,高并发的www服务和代理服务软件,因具有高并发(特别是静态资源),占用系统资源少等特性,且功能丰富而逐渐流行起来.功能应用上,Nginx不但是一个优 ...
- Android在init.rc中自定义开机启动进程(service)
Android在init.rc中自定义开机启动进程(service) 原文链接:Android如何配置init.rc中的开机启动进程(service)(有删改) 前言 首先我先来解释一下本文到底讲什么 ...
- 3568F-Linux-RT系统测试手册
- NXP i.MX 6ULL工业核心板规格书( ARM Cortex-A7,主频792MHz)
1 核心板简介 创龙科技SOM-TLIMX6U是一款基于NXP i.MX 6ULL的ARM Cortex-A7高性能低功耗处理器设计的低成本工业级核心板,主频792MHz,通过邮票孔连接方式引出Eth ...
- Mac 设置多个版本JDK
控制台: p.p1 { margin: 0; font: 11px Menlo; color: rgba(0, 0, 0, 1) } span.s1 { font-variant-ligatures: ...
- thinkphp5 关于跨域的一些坑
1.首先在tp5的入口文件:public/index.php 在里面添加三行: // [ 应用入口文件 ] header("Access-Control-Allow-Origin:*&quo ...
- 从DDPM到DDIM
从DDPM到DDIM (一) 现在网络上关于DDPM和DDIM的讲解有很多,但无论什么样的讲解,都不如自己推到一边来的痛快.笔者希望就这篇文章,从头到尾对扩散模型做一次完整的推导. DDPM是一个双向 ...
- 数据仓库建模工具之一——Hive学习第三天
1.Hive的基本操作 1.1 Hive库操作 1.1.1 创建数据库 1)创建一个数据库,数据库在HDFS上的默认存储路径是/hive/warehouse/*.db. create database ...
- 吐血整理如何在Google Earth Engine上写循环 五个代码实例详细拆解
在这里同步一篇本人的原创文章.原文发布于2023年发布在知乎专栏,转移过来时略有修改.全文共计3万余字,希望帮助到GEE小白快速进阶. 引言 这篇文章主要解答GEE中.map()和.iterate() ...