divとリンクの調整方法

Question

2つは同じ行に、次のdivはそれらの真下に、3つのdivは両方ともラッパーの中央に配置する必要があります。私はそれは、私が検索= IDに任意のスタイルを与えないことを期待していたレジスタをターゲットにして、私のCSSが

#wrapper{ 
      float:right; 
      max-width:380px; 
      text-align:center    
      } 

    #reglog{ 
      display:inline-block 
      } 

ある 私のHTMLは

<div id="wrapper"> 
    <div id="reglog> 
     <a href="#">Register</a> 
     <a href="#">Login</a>   
     </div> 
     <div id="search">Quick Search</div> 
</div> <!--End of wrapper-->. 

あるし、それらの両方の下の検索ボックスにログインしていますreglogのブロックの下に落ちるでしょう... 私はなぜこれを動作させることができないのですか？

おかげ ミシェル

Answer 1

だけdisplay:block;の代わりinline-blockを使用しています。 ...以下

#wrapper{ 
 
    float:right; 
 
    max-width:380px; 
 
    text-align:center    
 
} 
 
#reglog, #search{ 
 
    display:block; 
 
}

<div id="wrapper"> 
 
    <div id="reglog> 
 
     <a href="#">Register</a> 
 
     <a href="#">Login</a>   
 
     </div> 
 
     <div id="search">Quick Search</div> 
 
</div> <!--End of wrapper-->.

Answer 2

を更新スニペットを確認してください、私はdisplay:flex;を使用し、また、あなたはすべて含まれてい<div></div>にこれらのCSSプロパティを添付しなければならないflex-direction: row | row-reverse | column | column-reverse;

を使用したいフレックス方向を指定することをお勧めしますあなたの3つの部門の

ここにすべての情報があります：https://css-tricks.com/snippets/css/a-guide-to-flexbox/