不同部分的说明：Margin(外边距) - 清除边框外的区域，外边距是透明的。Border(边框) - 围绕在内边距和内容外的边框。Padding(内边距) - 清除内容周围的区域，内边距是透明的。Content(内容) - 盒子的内容，显示文本和图像。为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>反向显示三个栏目</title>
<style type="text/css">
.container {
display:-webkit-box;
display:-moz-box;
display:box;
-webkit-box-orient:horizontal;
-moz-box-orient:horizontal;
box-orient:horizontal;
-webkit-box-direction:reverse;
-moz-box-direction:reverse;
box-direction:reverse;
}
.container div {
color:#FFF;
font-size:12px;
padding:10px;
line-height:20px;
}
.container div ul {
margin:0;
padding-left:20px;
}
.container .left-aside {
background-color:#F63;
}
.container .center-content {
background-color:#390;
width:200px;
}
.container .right-aside {
background-color:#039
}
</style>
<body>
<div class="container">
<div class="left-aside">
<h2>菜单</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>活动沙龙</li>
</ul>
</div>
<div class="center-content">
<h2>内容</h2>
<p>盒布局是CSS3发展的新型布局方式，它比传统的浮动布局方式更加完善、更加灵活，而使用方法却极为简单。</p>
<p>开启盒布局方法，就是设置display属性值为box（或inline-box）。</p>
</div>
<div class="right-aside">
<h2>工具</h2>
<ul>
<li>天气预报</li>
<li>货币汇率</li>
</ul>
</div>
</div>
</body>
</html>
Processed:
0.012, SQL:
9
