2つのインラインブロックのテキストを水平に整列するにはどうすればよいですか？

Question

ブラウザウィンドウを左に最小化すると、サイドバーのテキストが消えます。私はそれを右に最小化すると、記事のテキストがダウンします。それらを上に並べることは可能ですか？ここでjsfiddle

<div id="wrapper"> 
<aside></aside> 
<section></section> 
</div> 

#wrapper{ 
    width: 100%; 
    padding: 10px; 
} 

section { 
    display: inline-block; 
    width: 70%; 
    height: 400px; 
} 

aside { 
    display: inline-block; 
    width: 25%; 
    height: 400px; 
} 

ありがとうです！

Answer 1

垂直配置オプションを試しましたか？

aside { 
    display: inline-block; 
    width: 25%; 
    height: 400px; 
    vertical-align: top; 
} 

Answer 2

私はあなたが柱状のレイアウトを作成したい場合は...それらの多くの子要素を持つ複雑な要素のためのインラインブロックを使用し、いずれかの山車、またはフレキシボックスを使用していないだろう。

#wrapper{ 
 
    width: 100%; 
 
    padding: 10px; 
 
} 
 

 
section { 
 
    float: left; 
 
    width: 70%; 
 
    height: 400px; 
 
} 
 

 
aside { 
 
    float: left; 
 
    width: 25%; 
 
    height: 400px; 
 
}

<div id="wrapper"> 
 
     <aside> 
 
    
 
     <h2>Sidebar</h2> 
 
      
 
     <ol> 
 
      <li>first item</li> 
 
      <li>second item</li> 
 
      <li>third item</li> 
 
     </ol> 
 
     
 
     </aside> 
 
     
 
     <section> 
 
     
 
     
 
      <h2> 
 
      Article Title 
 
      </h2> 
 
     
 
     <p> 
 
      Bacon ipsum dolor amet flank pork loin ham pork chop chicken t-bone swine frankfurter beef ribs ham hock. Sirloin venison flank, pork belly doner andouille turducken. Chuck corned beef ham swine ball tip, beef capicola short ribs meatloaf frankfurter. 
 
      Capicola tongue boudin pork loin turducken shoulder tri-tip. Biltong corned beef ball tip hamburger turducken, chuck picanha kevin prosciutto. Venison cupim strip steak, biltong hamburger meatball boudin salami ground round jowl brisket tenderloin 
 
      short ribs. Meatball tri-tip short loin shankle capicola, doner prosciutto ball tip pork belly filet mignon ham pig pancetta beef cupim. Shankle tail jerky burgdoggen rump venison. Ham hock sausage brisket kevin. Pork belly ground round ham, 
 
      flank boudin short ribs pig tongue shankle salami pancetta chicken beef ribs. Jerky alcatra porchetta, venison prosciutto frankfurter cow chicken burgdoggen swine sausage kielbasa. Does your lorem ipsum text long for something a little meatier? 
 
      Give our generator a try… it’s tasty! 
 
     </p> 
 
     
 
     </section> 
 

 
    </div>

Answer 3

ブラウザのサポート要件に応じて、あなたは `フロート与えるフレキシボックス

#wrapper{ 
    width: 100%; 
    height: 400px; 
    padding: 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

https://jsfiddle.net/8bbo2cg7/