html两个部分在对方下面并且在旁边

Question

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

我该如何做到这一点？我在父母部分的第1部分和display: inline上尝试过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%; 
 
    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

只是包装元件到柔性容器，并删除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>