html 2つのセクションがお互いの下にあります。

Question

ページに2つのセクションを追加すると、サイドバーが垂直方向の 第2セクションに等しくなります。最初のセクションが必要です。

どうすればよいですか？私はセクション1でfloat: leftを試して、親セクションではdisplay: inlineを試しましたが、それらは "壊れる"とは言えませんでした。 私のページに2つのセクションを追加すると、サイドバーが垂直方向の 第2セクションに等しくなります。私は最初のセクションを必要とし、垂直方向は同じです。

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>