<div>
<div
class=“left”><!-----左边盒子----->
<ul>
<li>条目1</li>
<li>条目2</li>
<li>条目3</li>
……
</ul>
</div>
<div
class=“middle”><!-----左边盒子----->
<ul>
<li>条目1</li>
<li>条目2</li>
<li>条目3</li>
……
</ul>
</div>
<div
class=“right”><!-----右边边盒子----->
<ul>
<li>条目1</li>
<li>条目2</li>
<li>条目3</li>
……
</ul>
</div>
</div>
需要注意：1）同列的这三个盒子，使用float浮动：如，float：left；这样就可以在一行排列顺次排列。
也可以对left盒子使用float：left；，右边的盒子使用float：right；
2）最外边的div盒子的宽度要大于同列的3个盒子总宽度，如果小了，则会被挤下来，不是在一行中显示。
1、首选看一下html代码：
html代码：
<div id="left">
<div class="inner">this is left sidebar content</div>
</div>
<div id="main">
<div class="inner">this is main content</div>
</div>
<div id="right">
<div class="inner">this is right siderbar content</div>
</div>
这种方法是借助于负的margin来实现的，首先在中间列定好固定值，因为此值是不会在改变的，接着对其进行左浮动；那么关键地主是在左右边栏设置地方，这种方法是将其都进行50%的宽度设置，并加上中负的左边距，此负的左边距最理想的值是中间栏宽度的一半加上1px，这样一来，左右边栏内容无法正常显示，那是因为对他们进行了负的左边距操作，现在只需要在左右边栏的内层div.inner将其拉回来。
2、css样式写法如下：
#left,
#right {
float: left
margin: 0 0 0 -271px
width: 50%
}
#main {
width: 540px
float: left
background: green
}
.inner {
padding: 20px
}
#left .inner,
#right .inner {
margin: 0 0 0 271px
background: orange
}
3、具体效果如下：
1行3列实现代码
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>景安</title>
<style type="text/css">
.zzidc{width: 500pxheight: 300pxbackground: red}
.a{float: leftwidth: 200pxheight: 300pxbackground: blue}
.b{float: leftwidth: 100pxheight: 300pxbackground: green}
.c{float: leftwidth: 200pxheight: 300pxbackground: gray}
</style>
</head>
<body>
<div class="zzidc">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
</body>
</html>
1列多行实现代码
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>景安</title>
<style type="text/css">
.a{width: 300pxheight: 50pxbackground: blue}
.b{width: 300pxheight: 50pxbackground: green}
.c{width: 300pxheight: 50pxbackground: gray}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
</body>
</html>
实现一行3列的话可以使用浮动布局或者定位，实现一列多行的使用使用默认布局模式即可
