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>