给右列一设置margin：auto 50px 上下外边距不管，左右个50px
margin 意思是 简写属性在一个声明中设置所有外边距属性。
这个简写属性设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0padding: 0}
body{width:1012px}
div{
width: 300px
height: 300px
border: 2px solid #333
border-sizing:border-box/*将边框设置为内边框 这样就不影响元素的宽度和高度,这样正好右列二到页面左边距正好是700px ,没有这个属性的话是708px*/
float: left
}
#a{
background: #ffc33c
border: 2px solid #333
}
#b{
background:#ff33cc
margin: auto 50px
}
#c{
background:#ff33cc
}
</style>
</head>
<body>
<div id="a">
左列
</div>
<div id="b">
右列1
</div>
<div id="c">
右列2
</div>
</body>
</html>
实现方式：左右元素浮动，中间元素左右marign值撑开两边距离。
例：
此时看似没有问题，可是如果中间内容过多，超出左右两边高度，我们将看到 文字环绕 问题，如下如所示。
解决办法：
补充flex左右布局，左边固定，右边自适应，并且两列等高自适应
ul{margin:0px
padding:0px
}
li{
float:left
width:76px/*这里要看你装的容器有多宽，宽度要能装下横向3个，但要小于4个的宽度，注意这里：这个宽度要加上你的设定的padding-left,所以li的实际宽度是100px*/
}
例子:
<div style="width:320px">/*这里建议div的宽度要大于3个LI的宽度*/
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
100分拿来！
