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

小技巧 左边固定右边自适应"/>

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:-左边盒子宽度-间隙；

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