出个小题目大家来看看！

12左府3右，100百，margun0aotu

盒子123高度并不相同

1mgrin0auto||相对，2，绝对，下=2的高负数，左0，3绝对，右0，下=2,3的高负数，

<style>
body,ul,li{
margin:0;padding:0;
}
.box{
width:1000px;
padding:55px 0;
margin:18px auto 0;
/*高度为自适应的话。那么就用内边距里*/
border:1px solid #ccc;text-align:center;
}
.box>ul{
list-style-type:none;width:100%;
}
.box>ul:after{
content:""; display:block;clear:both;
}
.box li{
float:left;border:1px solid #ccc;margin-left:10px;padding:20px 30px;
}
.box li:first-child{
float:right;margin-left:0; margin-right:9px;
/*宽高都要自适应那么内边距离来做比较好。百分比的话…外面的.box都是固定死的。。。这要看起来像垂直居中。。。*/
}
</style>
<div class="box">
<ul>
<li>盒子3</li>
<li>盒子1</li>
<li>盒子2</li>
</ul>
</div>
<!--
-->

.box的宽度。

这个只是最基本的布局。。。

<style>
body,ul,li{
margin:0;padding:0;
}
.box{
width:1000px;
padding:55px 0;
margin:18px auto 0;
border:1px solid #ccc;text-align:center;
display:table;
word-wrap:break-word;
}
.box>ul{
list-style-type:none;width:100%;
display:table-cell;text-align:left;
}
.box li{
display:inline-block;
margin-left:1%;
border:1px solid #ccc;padding:20px 8%; vertical-align:middle;
-webkit-box-sizing:border-box;
box-sizing:border-box;
text-align:center;
}
.box .box1,.box .box2{
width:20%;
}
.box li.box3{
text-align:right;
border:none;
width:55%;
}
</style>
<div class="box">
<ul>
<li class="box1">盒子1</li>
<li class="box2">盒子25555555555555<br />555</li>
<li class="box3"><span style="display:inline-block;border:1px solid #222; padding:20px 8%;">盒子3<br />555 <br />666<br />10086</span></li>
</ul>
</div>
<!--

-->