✨实现效果

✨具体代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>两列布局</title>
		<style type="text/css">
			/* 根元素设置为border-box */
			:root {
				box-sizing: border-box;
			}
			/* 告诉其他所有元素和伪元素继承其盒模型 */
			*,
			::before,
			::after {
				box-sizing: inherit;
			}
			body {
				background-color: #eee;
				font-family: Arial, Helvetica, sans-serif;
			}
			
			/* 猫头鹰选择器 */
			/* 选择同一父级下除了第一个元素之外的其他所有元素 */
			body * + * {
				margin-top: 1.5em;
			}
			header {
				/* 相同的上下内边距，不用指定高度也能让元素内容垂直居中 */
				/* 给头部添加上下内边距，外边距就不会在容器外部折叠 */
				padding: 1em 1.5em;
				color: #fff;
				background-color: #0072b0;
				border-radius: .5em;
			}
			/* 实现等高列 */
			.container {
				/* 变成弹性容器，子元素默认等高 */
				/* 除非别无选择，否则不要明确设置元素的高度 */
				/* 现寻找一个替代方案，设置高度一定会导致更复杂的情况 */
				display: flex;
			}
			.main {
				/* float: left; */
				width: 70%;
				/* 加上内边距 */
				padding: 1em 1.5em;
				background-color: #fff;
				border-radius: .5em;
			}
			.siderbar {
				/* float: left; */
				/* 两列之间加间隔 */
				width: calc(30% - 1.5em);
				/* 给侧边栏加上内边距 */
				padding: 1.5em;
				/* 移除猫头鹰选择器 设置的顶部外边距 */
				margin-top: 0;
				margin-left: 1.5em;
				/* 给侧边栏加上内边距 */
				padding: 1.5em;
				background-color: #fff;
				border-radius: .5em;
			}
			.button-link {
				display: block;
				padding: 0.5em;
				color: #fff;
				background-color: #0090C9;
				text-align: center;
				text-decoration: none;
				text-transform: uppercase;
			}
			/* 更好的方法 使用猫头鹰选择器 */
			/* 相邻的兄弟组合器+ */
			/* .button-link + .button-link {
				margin-top: 1.5em;
			} */
			.sponsor-link {
				display: block;
				color: #0072b0;
				font-weight: bold;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<header>
			<h1>Franklin Running Club</h1>
		</header>
		
		<div class="container">
			<main class="main"> 
				<h2>Come join us!</h2>
				<p>
					The Franklin Running club meets at 6:00pm every 
					Thursday at the town square.Runs are three to five 
					miles,at your own pace.
				</p>
			</main>
			
			<aside class="siderbar">
				<a href="/twitter" class="button-link">follow us on Twitter</a>
				<a href="/facebook" class="button-link">like us on Facebook</a>
				<a href="/sponsors" class="sponsor-link">become a sponsor</a>
			</aside>
		</div>
	</body>
</html>
css实现两栏布局

✨实现效果

✨具体代码

❤️总结
