html 两个部分彼此下方并放在一边

Question

当我在页面中添加两个部分时，侧边栏垂直等于第二部分，我需要我的第一部分和旁边在垂直方向上相等。

我该如何实现？我在第 1 部分尝试了 float: left 并在父部分尝试了 display: inline ，但这些似乎导致 aside “爆发”。当我在页面中添加两个部分时，侧边栏垂直等于第二部分，我需要我的第一部分和旁边在垂直方向上相等。

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

* {
  margin: 0;
  padding: 0;
}

a {
  color: #444;
}

body,
html {
  width: 100%;
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0
}

body {
  background: #f7f7f7;
  min-height: 100%;
  height: auto;
  position: relative;
  font-family: 'Roboto', sans-serif;
  line-height: normal;
  font-weight: normal;
  font-size: 1em;
}

.site-header {
  position: relative;
  z-index: 99;
  float: left;
  width: 100%;
  margin-bottom: 20px;
  padding: 0;
  background: #FFF;
}

#page,
.container {
  width: 1124px;
  min-width: 240px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

.header-inner {
  width: 100%;
  height: 100%;
  display: table;
  padding: 1% 0;
}

.secondary-navigation {
  background: #17aa1c;
}

a:link,
a:visited,
a:active {
  text-decoration: none;
}

a:active,
a:hover {
  outline: 0;
}

.main-navigation ul li {
  display: inline-block;
  padding-top: 19px;
  padding-bottom: 19px;
  padding-left: 20px;
  padding-right: 20px;
  text-decoration: none;
}

.main-navigation ul li a {
  color: #fff;
}

.main-navigation ul li a:hover {
  color: #ff9;
}

.secondary-navigation {
  width: 100%!important;
}

.content-area {
  width: 55%;
  float: left;
  margin-left: 100px;
  margin-right: 1%;
  margin-bottom: 20px;
  background: #FFF;
  padding: 0 10px;
  -webkit-box-shadow: 0 1px 1px #c2c4c4;
  -moz-box-shadow: 0 1px 1px #c2c4c4;
  box-shadow: 0 1px 1px #c2c4c4;
  text-shadow: 0 1px 1px #FFF;
  clear: both;
}

.aside {
  float: left;
  width: 20%;
  margin-bottom: 20px;
  background: #FFF;
  padding: 0 10px;
  text-shadow: 0 1px 1px #FFF;
}

.inner {
  padding: 10px;
}

.title {
  font-weight: 500;
  color: #444;
  text-transform: uppercase;
  margin: 0;
}

.post-info {
  display: inline-table;
  color: #919191;
  float: left;
  clear: both;
  width: 100%;
}

.post-info>span {
  display: inline-block;
  font-size: 0.9em;
  padding: 10px;
  color: #919191;
  text-transform: uppercase;
}

<section class="content-area">
  <article>
    <div class="inner">
      <h2 class="title">sasasasanostrud exercitation ullamco laboris nisi ut aliquip</h2>
      <div class="post-info">
        <span>Posted</span>
        <span>Category</span>
        <span>Date</span>
      </div>
      <p>ipsum dolor sit amet, consectetur adipisicing elit, sed do quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
      </p>
      <div class="readmore"><a href="#">Readmore</a></div>
    </div>
  </article>
</section>

<section id="primary" class="content-area">
  <div class="inner">
    <h2 class="title">sasasasanostrud exercitation ullamco laboris nisi ut aliquip</h2>
    <div class="post-info">
      <span>Posted</span>
      <span>Category</span>
      <span>Date</span>
    </div>
    <p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    </p>
    <div class="readmore"><a href="#">Readmore</a></div>
  </div>
</section>

<aside class="aside ">
  <div class="inner">
    <h3>Popular Posts</h3>
    <ul>
      <li><a href="#">tempor incididunt ut labore et doloreincididunt ut labore et</a></li>
      <li><a href="#">tempor incididunt ut labore et dolore</a></li>
      <li><a href="#">tempor incididuntincididunt ut labore et ut labore et dolore</a></li>
    </ul>
  </div>
</aside>

Answer 1

只需将元素包装到 flex-container 中并移除 float: left。演示:

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
  display: block;
}

* {
  margin: 0;
  padding: 0;
}

a {
  color: #444;
}

body,
html {
  width: 100%;
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0
}

body {
  background: #f7f7f7;
  min-height: 100%;
  height: auto;
  position: relative;
  font-family: 'Roboto', sans-serif;
  line-height: normal;
  font-weight: normal;
  font-size: 1em;
}

.site-header {
  position: relative;
  z-index: 99;
  float: left;
  width: 100%;
  margin-bottom: 20px;
  padding: 0;
  background: #FFF;
}

#page,
.container {
  width: 1124px;
  min-width: 240px;
  position: relative;
  margin-right: auto;
  margin-left: auto;
}

.header-inner {
  width: 100%;
  height: 100%;
  display: table;
  padding: 1% 0;
}

.secondary-navigation {
  background: #17aa1c;
}

a:link,
a:visited,
a:active {
  text-decoration: none;
}

a:active,
a:hover {
  outline: 0;
}

.main-navigation ul li {
  display: inline-block;
  padding-top: 19px;
  padding-bottom: 19px;
  padding-left: 20px;
  padding-right: 20px;
  text-decoration: none;
}

.main-navigation ul li a {
  color: #fff;
}

.main-navigation ul li a:hover {
  color: #ff9;
}

.secondary-navigation {
  width: 100%!important;
}

.content-area {
  width: 55%;
  margin-left: 100px;
  margin-right: 1%;
  margin-bottom: 20px;
  background: #FFF;
  padding: 0 10px;
  -webkit-box-shadow: 0 1px 1px #c2c4c4;
  -moz-box-shadow: 0 1px 1px #c2c4c4;
  box-shadow: 0 1px 1px #c2c4c4;
  text-shadow: 0 1px 1px #FFF;
  clear: both;
}

.aside {
  width: 20%;
  margin-bottom: 20px;
  background: #FFF;
  padding: 0 10px;
  text-shadow: 0 1px 1px #FFF;
}

.inner {
  padding: 10px;
}

.title {
  font-weight: 500;
  color: #444;
  text-transform: uppercase;
  margin: 0;
}

.post-info {
  display: inline-table;
  color: #919191;
  float: left;
  clear: both;
  width: 100%;
}

.post-info>span {
  display: inline-block;
  font-size: 0.9em;
  padding: 10px;
  color: #919191;
  text-transform: uppercase;
}

.flex {
  display: flex;
}

<div class="flex">
  <section class="content-area">
    <article>
      <div class="inner">
        <h2 class="title">sasasasanostrud exercitation ullamco laboris nisi ut aliquip</h2>
        <div class="post-info">
          <span>Posted</span>
          <span>Category</span>
          <span>Date</span>
        </div>
        <p>ipsum dolor sit amet, consectetur adipisicing elit, sed do quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        </p>
        <div class="readmore"><a href="#">Readmore</a></div>
      </div>
    </article>
  </section>
  
  <aside class="aside ">
    <div class="inner">
      <h3>Popular Posts</h3>
      <ul>
        <li><a href="#">tempor incididunt ut labore et doloreincididunt ut labore et</a></li>
        <li><a href="#">tempor incididunt ut labore et dolore</a></li>
        <li><a href="#">tempor incididuntincididunt ut labore et ut labore et dolore</a></li>
      </ul>
    </div>
  </aside>
</div>

<section id="primary" class="content-area">
  <div class="inner">
    <h2 class="title">sasasasanostrud exercitation ullamco laboris nisi ut aliquip</h2>
    <div class="post-info">
      <span>Posted</span>
      <span>Category</span>
      <span>Date</span>
    </div>
    <p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    </p>
    <div class="readmore"><a href="#">Readmore</a></div>
  </div>
</section>