css 布局小技巧 左边固定右边自适应

在页面布局或者是列表布局中，我们经常出现一个场景：左边是固定宽度的盒子，右边自适应：

<div class="product_open">
    <label class="label">Open Product:</label>//这一列是固定宽度
    <ul class="check_game">//这一列自适应
        <li><label><input type="checkbox"> Racing</label></li>
        <li><label><input type="checkbox"> 4D</label></li>
        <li><label><input type="checkbox"> Mark6</label></li>
        <li><label><input type="checkbox"> Poker</label></li>
    </ul>
</div>

.label{
  width:100px;
  display:block;
  float: left;
  text-align: right;
}
.check_game{
  list-style: none;
  margin-left: 120px;//两列之间留有20px
  -webkit-user-select: none;
}

这是博主推荐的方法，当然也有很多其他方法，比如让左右盒子都display：inline-block; 给左边的设定宽度，然后给右边的盒子width:100%;margin-right:-左边盒子宽度-间隙；

最近硝烟四起，作为一个小菜鸟，要更加努力学习才行，目标今年看完犀牛书。读书养性