JSFiddle - React, Tailwind, and code Playground

by XianfaLang

HTML

<!-- 两列自适应结构 -->
<div id="header">头部信息</div>
<div id="container">
	<div class="mainBox">
		<p>主要内容区域</p>
		<p>已经不再只是一行文字了</p>
		<p>要放很多很多东西到这个区域中来</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
		<p>不断的重复啊重复着……</p>
	</div>
	<div class="sideBox">侧边栏</div>
</div>
<div id="footer">底部信息</div>

CSS

* {
	margin:0;
	padding:0;
} /* 设置页面中所有元素的内外补丁为0，便于更便捷的页面布局 */
#header, #footer {
	height:30px;
	background-color:#E8E8E8;
} /* 设置头部信息以及底部信息的高度为30px，并添加浅灰色背景色 */
#container {
	margin:10px 0;
} /* 设置页面内容区域设置上下外补丁为10px */
.mainBox {
	float:left; /* 将主要内容区域向左浮动 */
	width:70%; /* 将mainBox的宽度修改为70% */
	color:#FF0000;
	background-color:#333333;
} /* 设置主要内容区域的宽度为70%，背景色以及文本颜色，并居左显示 */
.sideBox {
	float:right; /* 将侧边栏向右浮动 */
	width:30%; /* 将sideBox的宽度修改为30% */
	color:#FFFFFF;
	background-color:#999999;
} /* 设置侧边栏的宽度为30%，背景色以及文本颜色，并居右显示 */
#container:after {
	display:block;
	visibility:hidden;
	font-size:0;
	line-height:0;
	clear:both;
	content:"";
} /* 清除内容区域的左右浮动 */
#footer {
	clear:both;
} /* 添加底部信息的对上级标签元素的浮动的清除 */