效果图如下:
代码如下:
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
h2 {
margin: 20px 0;
}
.left1 {
width: 200px;
height: 100px;
green;
}
.right1 {
width: 60%;
height: 100px;
red;
}
.left2 {
width: 200px;
height: 100px;
green;
display: inline-block;
}
.right2 {
width: 60%;
height: 100px;
red;
display: inline-block;
}
.left3 {
width: 200px;
height: 100px;
float: left;
green;
}
.right3 {
width: 60%;
height: 100px;
float: right;
red;
}
.mainL, .sitebarL, .mainR, .sitebarR {
height: 200px;
/*font: bolder 20px/200px '微软雅黑';*/
color: #fff;
text-align: center;
}
.mainL {
width: 100%;
float: left;
}
.mainR {
width: 100%;
float: right;
}
.mainL .contentL {
height: 100%;
margin-right: 200px;
red;
}
.mainR .contentR {
height: 100%;
margin-left: 200px;
red;
}
.contentLR {
height: 100%;
margin-left: 200px;
margin-right: 200px;
red;
}
.sitebarL {
width: 200px;
float: left;
margin-right: -100%;
green;
}
.sitebarR {
width: 200px;
float: right;
margin-left: -100%;
green;
}
.clear {
width: 100%;
clear: both;
height: 10px;
}
#left {
float: left;
width: 200px;
height: 100px;
green;
}
#contentL {
height: 100px;
red;
margin-left: 200px;/*==等于右边栏宽度==*/
}
#right {
float: right;
width: 200px;
height: 100px;
green;
}
#contentR {
height: 100px;
red;
margin-right: 200px;/*==等于左边栏宽度==*/
}
#contentLR {
height: 100px;
red;
margin: 0 200px;
}
.cont {
overflow: hidden;
}
</style>
</head>
<body>
<h2>普通文档布局</h2>
<
div >Left</div>
<div >Right</div>
<div ></div>
<h2>行内布局使用inline-block</h2>
<div >Left</div>
<div >Right</div>
<div ></div>
<h2>浮动布局float</h2>
<div >Left:<br>
width: 200px;<br>
height: 100px;<br>
float: left;<br>
green;
</div>
<div >Right<br>
width: 60%;<br>
height: 100px;<br>
float: right;<br>
red;
</div>
<div ></div>
<h2>浮动布局float+margin正边距与多列布局</h2>
<h3>两列</h3>
<div id="left">
Left Sidebar<br>
float: left;<br>
width: 200px;<br>
height: 100px;<br>
green;<br>
</div>
<div id="contentL">
height: 100px;
red;
margin-left: 200px;/*==等于左边栏宽度==*/
<div id="contentInner">
Main Content
</div>
</div>
<div ></div>
<div id="right">
Right Sidebar<br>
float: right;<br>
width: 200px;<br>
height: 100px;<br>
green;
</div>
<div id="contentR">
height: 100px;
red;
margin-right: 200px;/*==等于右边栏宽度==*/
<div id="contentInner">
Main Content
</div>
</div>
<div ></div>
<h3>三列</h3>
<div id="left">
Left Sidebar<br>
float: left;<br>
width: 200px;<br>
height: 100px;<br>
green;<br>
</div>
<div id="right">
Right Sidebar<br>
float: right;<br>
width: 200px;<br>
height: 100px;<br>
green;
</div>
<div id="contentLR">
<div id="contentInner">
Main Content<br>
height: 100px;<br>
red;<br>
margin: 0 200px;<br>
</div>
</div>
<h2>浮动布局float+margin负边距与多列布局</h2>
<h3>两列</h3>
<div >
<h4>左侧定宽200px区块</h4>
<p>width: 200px;
float: left;
margin-right: -100%;
green;
</p>
</div>
<div >
<div >
<h4>右侧主体自适应区块</h4>
<p>.mainR:width: 100%;
float: right;</p>
<p>.contentR:height: 100%;
margin-left: 200px;
red;
</p>
</div>
</div>
<div ></div>
<div >
<div >
<h4>左侧主体自适应区块</h4>
<p>.mainL:width: 100%;
float: left;</p>
<p>.contentL:height: 100%;
margin-right: 200px;
red;</p>
</div>
</div>
<div >
<h4>右侧定宽200px区块</h4><h4>
<p>width: 200px;
float: right;
margin-left: -100%;
green;
</p>
</h4></div>
<div ></div>
<h3>三列</h3>
<div >
<h4>左侧定宽200px区块</h4>
<p>width: 200px;
float: left;
margin-right: -100%;
green;
</p>
</div>
<div >
<div >
<h4>主体自适应区块</h4>
<p>.mainR:width: 100%;
float: left;
</p>
<p>.contentLR:height: 100%;
margin-left: 200px;
margin-right: 200px;
red;
</p>
</div>
</div>
<div >
<h4>右侧定宽200px区块</h4><h4>
<p>width: 200px;
float: right;
margin-left: -100%;
green;
</p>
</h4></div>
<div ></div>
</body></html>
原标题:多列样式布局
关键词: