html---三列布局
2024-09-06 10:48:21
三列布局 1一
1.两边固定 当中自适应
2.当中列要完整显示
3.当中列要优先加载
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title> <style type="text/css"> *{
margin: ;
padding: ;
}
body{
/*2*left+right*/
min-width: 600px;
}
div{
height: 100px;
}
#left,#right{
width: 200px;
background: pink;
}
#left{
float: left;
}
#right{
float: right;
}
#middle{
background: deeppink;
}
</style>
</head>
<body>
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
三列布局2二
1.两边固定 当中自适应
2.当中列要完整显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title> <style type="text/css"> *{
margin: ;
padding: ;
}
body{
/*2*left+right*/
min-width: 600px;
}
div{
height: 100px;
}
#left,#right{
width: 200px;
background: pink;
}
#middle{
background: deeppink;
padding: 200px;
}
#left{
position: absolute;
left: ;
top: ;
}
#right{
position: absolute;
right: ;
top: ;
}
</style>
</head>
<body style="position: relative;">
<div id="left">left</div>
<div id="middle">middle</div>
<div id="right">right</div>
</body>
</html>
最新文章
- 什么是英特尔® Edison 模块？
- ctypes 调用 dll
- JAVA算法
- windows多线程相关
- JavaScript prototype 属性
- CentOS下几种软件安装方式
- TexturePacker文件的反向解析-TextureUnpacker
- 蓝色的成长记录——追逐DBA（8）：为了夺回SP报告，回顾oracle的STATSPACK实验
- (转)cin、cin.get()、cin.getline()、getline()、gets()等函数的用法
- Ajax的基本请求/响应模型
- struts2.1.6教程四_2、ActionContext 、ValueStack 、Stack Context
- 【转】NOR Flash擦写和原理分析
- bzoj1997 [HNOI2010]平面图判定Plana
- QML-WebEngineView加载html(Echarts绘图）
- python全栈开发 * 34知识点汇总 * 180719
- Flutter之MaterialApp使用详解
- VS2017上在线和离线安装Qt插件（在线安装）
- tomcat8.5之后版本，远程无法登录管理页面
- C# 打印、输入和for循环的使用
- mysql存储引擎innodb、myisam区别