css :three column +top box

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body{
    margin:0;
    padding:0;
    color:#ccc;
    background-color:#333;
}

#top{
    margin:20px 20px 0px 20px;
    padding:10px;
    background: #666;
    border:5px solid #ccc;
    height:70px;
}
#left{
    margin:20px;
    padding:10px;
    width:120px;
    border:5px solid white;
    position:absolute;
    top:120px; /*top垂直高度为120px*/
    left:0px;
    background:#666;
}


#middle{
    margin:20px  190px;/*left宽度为190px*/
    padding:10px;
    background:#666;
    border:5px solid white;
}


#right{
    position:absolute;
    top:120px;
    right:0px;
    margin:20px;
    padding:10px;
    border:5px solid #ccc;
    background:#666;
    width:120px;
    
    
}
</style>
</head>

<body>
<div id="top">
    <p>1</p>
</div>
<div  id="left">
    <p>1</p>
</div>
<div id="middle">
<pre>
#top {
    margin: 20px 20px 0px 20px;
    padding: 10px;
    border: 5px solid #ccc;
    background: #666;
    height: 100px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    height: 70px;
    }
html>body #top {
    height: 70px; /* ie5win fudge ends */
    }
#left {
    position: absolute;
    top: 120px;
    left: 0px;
    margin: 20px;
    padding: 10px;
    border: 5px solid #ccc;
    background: #666;
     150px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
     120px;
    }
html>body #left {
     120px; /* ie5win fudge ends */
    }
#middle {
    margin: 20px 190px 20px 190px;
    padding: 10px;
    border: 5px solid #ccc;
    background: #666;
    }
#right {
    position: absolute;
    top: 120px;
    right: 0px; /* Opera5.02 will show a space 
    at right when there is no scroll bar */
    margin: 20px;
    padding: 10px;
    border: 5px solid #ccc;
    background: #666;
     150px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
     120px;
    }
html>body #right {
     120px; /* ie5win fudge ends */
    }
</pre>

<div align="right"><p><a href="css/03_3columnplustopbox.css">[full css]</a></p></div>

</div>
<div id="right">

    <p>1</p>

</div>

</body>
</html>

left：Sets the left margin edge for a positioned box。

Definition and Usage

For absolutely positioned elements, the left property sets the left edge of an element to a unit to the left/right of the left edge of its containing element.

For relatively positioned elements, the left property sets the left edge of an element to a unit to the left/right to its normal position.

http://www.w3schools.com/cssref/pr_pos_left.asp

显示如下：

http://www.thenoodleincident.com/tutorials/box_lesson/basic4.html

相关阅读:
Microsoft Exchange Mail Flow Rule
Microsoft Exchange Inactive mailbox
Microsoft Exchange In-Place Hold and Litigation Hold
Microsoft Exchange eDiscovery
Microsoft Exchange Retention Policy
JavaScript Array 操作
 CSS选择器优先级
 CSS实现垂直居中
 watch和computed和methods区别是什么？
什么是async和await？怎么捕获异常？
原文地址：https://www.cnblogs.com/youxin/p/2651460.html