标签归档:3cols layout

3栏布局-两侧固定宽度中间自适应宽度

早在工作中,写一些图片列表时候就有的这种感觉。怎么写的呢?一个li,里面img左浮动,其他内容不变,即可形成左侧缩略图,右侧描述信息的样子,看这个图:

左右两栏内容图例
左右两栏内容图例

结构类似于<img /> <div>introduction</div>,如果在firebug下看,可以发现div区域是包括img区域的,但是内容会环绕图片。div不设置宽度,此时div是和父级元素(li)是一样宽度的。一次偶然我随手给div加了个overflow:hidden,发现div覆盖区域适应了内容宽度,不再包含img区域了。然后用zoom:1的设置使IE也达到此效果。IE6有点瑕疵,div和img会有空白相隔。

而本文就是来源于此发现,从而很容易的实现3栏布局:两侧栏固定宽度,中间自适应宽度。无需其他说明,看代码就一切明了了。

html:

<body>
  <div class="side fl">
     左侧栏
  </div>
  <div class="main">
	<div class="side fr">
	    右侧栏
	</div>
	<div class="main">
		中间自适应
	</div>
  </div>
</body>

css:

  .fl, .fr {float:left;display:inline;}
  .fr{float:right;}

  .side {width:200px;height:500px;background:#ccc;}
  .main {height:500px;overflow:hidden;zoom:1;border:1px solid red;}

是的,就是这么简单简洁的代码,点击这里可以看到Demo

再来一个完整页面源码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>两侧固定宽度,中间自适应宽度布局</title>
    <style type="text/css">
    #left {float:left;width:200px;background:red} 
    #main, #mid {overflow:hidden;zoom:1;background:green}
    #right {float:right;width:200px;background:pink}
    </style>
</head>
<body>
    <div id="left">left</div>
    <div id="main">
        <div id="right">right</div>
        <div id="mid">center</div>
    </div>
</body>
</html>