三列布局（左右固定宽度，中间自适应）

来源：互联网发布：如何成为一个网络写手编辑：程序博客网时间：2024/05/16 19:32

以前在网上看到过，说这个问题是一道经典的笔试/面试题。当时在百度面试的时候果然就遇到过。昨天在兰亭的时候果然又遇到了。其实，这个题目确实考到了Css几个方面的很重要的基础知识。首先考到了定位中的方法中的文档流和浮动流，然后考到了文档流和浮动流默认宽度和显示层级（我一般理解成index这种含义，或者画布中的上下层一样，浮动流会居于上层，文档流会居于下层，因此浮动流区块可能会部分遮住文档流区块，但是文档流在下面是依然存在的，只是被遮住了而已）。
首先写出两个div，让第一个div左浮动，第二个div右浮动，第三个div直接以文档流去定位。由于第一个和第二个div是浮动流定位，所以会脱离文档流，并且第一个div会浮动到父容器区域的左边，第二个div会浮动到父容器的右边，在一排中显示。这时候第三个div由于是文档流定位的，且如果不设宽度或默认成100%，会随着浏览器窗口变化宽度的，因此前面两个浮动流区块会部分遮住此文档流区块，这时只用对此区块设置左右margin即可。

<!DOCTYPE html><html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">        <title>无标题文档</title>        <style type='text/css'>            * {                margin: 0;                padding: 0;            }            #left {                width: 100px;                float: left;                background: green;                height: 300px;                overflow: hidden;            }            #right {                width: 100px;                float: right;                background: red;                height: 300px;                overflow: hidden;            }            #middle {                margin-right: 110px;                margin-left: 110px;                height: 300px;                background: #ccc;            }        </style>    </head>    <body>        <div id="left">        </div>        <div id="right">        </div>        <div id="middle">        </div>    </body></html>

自己试了好几次，但是右边 div 总是另起一行排列，后来发现原来 html 中要先列出 left 和 right 再列 middle。原因：尚未搞懂。
总结一下，两种方法实现该效果：
1.左右浮动，中间正常文档流。
2.左右绝对定位，中间正常文档流。

0 0