table布局

　　开辟了博客园,观察样式有感,当用鼠标缩小浏览器大小时,可以看到主内容区内右边的区域是固定的,左边的自适应,这里用到了table.

　　

　　大概是这样

　　.content{

　　　　width:100%;

　　　　display:table;

　　}

　　.leftBox{

　　　　display:table-cell;

　　}

　　.rightBox{

　　　　display:table-cell;

　　　　width:300px;

　　}

　　<div class="content">

　　　　<div class="leftBox">填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦</div>

　　　　<div class="rightBox">填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦</div>

　　</div>　

　　里边盒子的大小具体哪边是固定的可以自己设定,一边设定为固定,另一边不固定,当浏览器窗口缩小时,一定是不固定的一遍先改变,直到到达极限,才开始

压缩另一边的大小(如word-break设置与否)这种做法相比于浮动写法的好处就是不会挤压后马上换行.

　　当然浮动也可以实现,如下:

　　.content{

　　　　width:100%;

　　}

　　.rightBox{

　　　　width:100%;

　　　　float:right;

　　　　margin-left:300px;

　　}

　　.leftBox{

　　　　position:absolute

　　　　width:280px;

　　　　left:10px;

　　　　height:10px;

　　　　word-wrap:break-word;

　　}

　　

　　<div class="content">

　　　　<div class="leftBox">填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦</div>

　　　　<div class="rightBox">填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦填满哦</div>

　　</div>

　　这2种方法可能比较适合大面积的布局吧,小块的布局影响还有待研究.