首先来说这是一种过时的方式。
示例：
https://jsfiddle.net/chuangchen/9m41ryhs/124/
html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header>
<h1>this is a header</h1>
</header>
<div class="wrapper">
<div class="container">
<main class="main">
<h2>Comme in 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="sidebar">
<div class="widget"></div>
<div class="widget"></div>
</aside>
</div>
</div>
</body>
</html><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<header>
<h1>this is a header</h1>
</header>
<div class="wrapper">
<div class="container">
<main class="main">
<h2>Comme in 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="sidebar">
<div class="widget"></div>
<div class="widget"></div>
</aside>
</div>
</div>
</body>
</html>css
.container {
display: table;
width: 100%;
border-spacing: 1.5rem 0;
}
/* 用于抵消 border-spacing，产生的边距 */
.wrapper {
margin-left: -1.5em;
margin-right: -1.5em;
}
main {
background: white;
border-radius: 0.5em;
width: 70%;
display: table-cell;
}
aside {
display: table-cell;
/* 使用table布局后margin-left不再生效,解决方案是 父元素 display: table-cell */
/* margin-left: 1%; */
width: 30%;
background: orange;
border-radius: 0.5em;
padding: 1.5em;
}.container {
display: table;
width: 100%;
border-spacing: 1.5rem 0;
}
/* 用于抵消 border-spacing，产生的边距 */
.wrapper {
margin-left: -1.5em;
margin-right: -1.5em;
}
main {
background: white;
border-radius: 0.5em;
width: 70%;
display: table-cell;
}
aside {
display: table-cell;
/* 使用table布局后margin-left不再生效,解决方案是 父元素 display: table-cell */
/* margin-left: 1%; */
width: 30%;
background: orange;
border-radius: 0.5em;
padding: 1.5em;
}