[原创]position定位实现三列布局

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>通过float进行布局</title>
    <style type="text/css">
        #left1
        {
            width: 200px;
            height: 100px;
            float: left;
            background: blue;
        }
        #center
        {
          
            margin-right: 200px;
            margin-left: 200px;
            background: red;
            height: 100px;
        }
        #right1
        {
            width: 200px;
            height: 100px;
            float: right;
            background: blue;
        }
    </style>
</head>
<body>
    <!--让浮动的div,left1和right1在不浮动的center上面,这样下面的center才会和浮动的div在同一行。如果清除center的float,
    则就会和float的div不在同一行。由于float只能影响后面的div,所以如果center在前面的话,下面div 的float将另起一行。
    -->
    <div id="left1">
    </div>
    <div id="right1">
    </div>
    <div id="center">
    </div>
</body>
</html>

posted @ 2015-04-02 17:58  杨博客  阅读(145)  评论(0编辑  收藏  举报