<!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