DIV左、中、右三列布局的各类情况说明
2024-08-27 06:48:19
一、中间定宽、左、右侧百分比自适应：
1、HTML代码：
<div id="left">
<div id="innerLeft">
<p>div三列布局的左列</p>
</div>
</div>
<div id="middle">
<div id="innerMiddle">
<p>div三列布局的中列</p>
</div>
</div>
<div id="right">
<div id="innerRight">
<p>div三列布局的右列</p>
</div>
</div>
2、CSS代码：
#left,
#right {
float: left;
width: 50%;
margin: 0 0 0 -150px;
height: 200px;
} #middle {
float: left;
width: 300px;
background: #CCC;
height: 200px;
} #innerLeft,
#innerRight {
margin: 0 0 0 150px;
background: #EFEFEF;
}
二、左侧定宽，中、右侧百分比自适应：
1、HTML代码：
<div id="left">
<div id="innerLeft">
<p>div三列布局的左列</p>
</div>
</div>
<div id="rightContent">
<div id="middle">
<div id="innerMiddle">
<p>div三列布局的中列</p>
</div>
</div>
<div id="right">
<div id="innerRight">
<p>div三列布局的右列</p>
</div>
</div>
</div>
2、CSS代码：
#left {
float: left;
width: 300px;
margin: 10px 10px 0 0;
}
#rightContent {
margin-left: 300px;
}
#middle {
float: left;
width: 50%;
}
#right {
float: left;
width: 50%;
}
三、左、右侧定宽，中间百分比自适应：
1、HTML代码：
<div id="left">
<div id="innerLeft">
<p>div三列布局的左列</p>
</div>
</div>
<div id="middle">
<div id="innerMiddle">
<p>div三列布局的中列</p>
</div>
</div>
<div id="right">
<div id="innerRight">
<p>div三列布局的右列</p>
</div>
</div>
2、CSS代码：
#left {
position: absolute;
top:;
left:;
width: 200px;
height: 200px;
}
#middle {
height: 200px;
margin-left: 200px;
margin-right: 200px;
}
#right {
position: absolute;
top:;
right:;
width: 200px;
height: 200px;
}
四、左、中定宽，右侧百分比自适应：
1、HTML代码：
<div id="leftContent">
<div id="left">
<div id="innerLeft">
<p>div三列布局的左列</p>
</div>
</div>
<div id="middle">
<div id="innerMiddle">
<p>div三列布局的中列</p>
</div>
</div>
</div>
<div id="right">
<div id="innerRight">
<p>div三列布局的右列</p>
</div>
</div>
2、CSS代码：
#leftContent {
float: left;
width: 500px;
height: 200px;
background: #CCC;
}
#left,
#middle {
float: left;
width: 50%;
}
#right {
margin-left: 500px;
height: 200px;
}
最新文章
- nginx超时重发
- 使用c#对windows进行关机、重启或注销
- spring事务手动回滚
- ThinkPHP的异步搜索
- OpenCV Linux 安装 Make出错
- [CSS]三层嵌套的滑动门
- [转]How to convert IP address to country name
- 使用C++11实现无锁stack（lock-free stack)
- 无法在web服务器上启动调试，服务器不支持对ASP.NET 或ATL Server应用程序进行调试。
- （Problem 37）Truncatable primes
- json optString getString
- js对象系列【一】深层理解对象与原型
- Egg.js 中入参的校验
- Characterization of Dynkin diagrams
- MySQL索引管理
- truffle init 从零开始创建简单DApp项目
- SPOJ SUBLEX Lexicographical Substring Search - 后缀数组
- SpringSecurity入门例子及遇到的问题解决
- DevExpress开发win8风格界面
- iOS-高仿微信摇一摇动画效果加震动音效