master

分支 (1)

管理

管理

master

5-12
/
2.html

<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<meta http-equiv="x-ua-compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>测试</title>
		<style>
			 * {
				box-sizing: border-box;
				margin: 0;
			}
			body {
				 width: 100%;
				 height: 100%;

			}
			/*弹性盒布局*/
			 #container {
				 display: -webkit-box;
				 display: -moz-box;
				 -moz-box-orient: vertical;
				 -webkit-box-orient: vertical;
				 border: 2px solid black;
				 width: 100%;
				 height: 100%;
			}

			 #left-sidebar {
				 -moz-box-ordinal-group: 2;
				 -webkit-box-ordinal-group: 2;
				 -moz-box-flex: 1;
				 -webkit-box-flex: 1;
				 padding: 20px;
				 background-color: orange;
			}

			#content {
				 -moz-box-ordinal-group: 1;
				 -webkit-box-ordinal-group: 1;
				 -moz-box-flex: 2;
				 -webkit-box-flex: 2;
				 padding: 20px;
				 background-color: yellow;
			}

			 #right-sidebar {
				 -moz-box-ordinal-group: 3;
				 -webkit-box-ordinal-group: 3;
				 -moz-box-flex: 1;
				 -webkit-box-flex: 1;
				 padding: 20px;
				 background-color: limegreen;
			}
		</style>
	</head>
    <body>
		<p id="container">
			<p id="left-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</p>
			<p id="content">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</p>
			<p id="right-sidebar">示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。示例文字，页面中比较长的示例文字。</p>
		</p>
	</body>

</html>