2つのdivの整列が正しくない

HTML/CSSコードに問題があります。私は2つのdivを持っています（写真で見ることができます）。私は2番目の写真に表示されているようにそれらを整列させたい。私のHTMLコードは次のとおりです。2つのdivの整列が正しくない

<!DOCTYPE html> 
<html> 
<head> 
    <title>---</title> 
    <link rel="stylesheet" type="text/css" href="assets/style.css"> 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
    <script type="text/javascript" src="assets/js/animatii.js"></script> 

</head> 

<body> 

    <div class="menu"> 
     <div class="menu_active_zone"> 
      <h1>Title</h1> 
      <button class="buton_login">AUTENTIFICARE/INREGISTRARE</button> 
      <br> 
      <div class="box_fl">fdsdsfd</div> 
      </div> 
    </div> 



</body> 
</html>

私のCSSコードは次のとおりです。私はあなたが提供する情報を試みた

.menu{ 
    width: 100%; 
    height: 80px; 
    top: 0; 
    left: 0; 
    background: #fff; 
    box-shadow: 0px 0.5px 5px 0.5px #888; 
    z-index: 2; 
    position: absolute; 
    display: none; 
} 

.menu h1{ 
    position: absolute; 
    font-size: 40px; 
    color: #888; 
    font-family: "Roboto Thin"; 
    margin-top: 20px; 
    font-weight: lighter; 
} 

.menu_active_zone{ 
    width: 1200px; 
    height: 80px; 
    background: #fff; 
    top:0; 
    left:0; 
    margin: 0 auto; 
} 
.box_fl{ 
    height: auto; 
    background: #fff; 
    box-shadow: 0px 0.5px 5px 0.5px #888; 
    display: none; 
    position: absolute; 
    right: 0; 
    bottom: 0; 


} 

.buton_login{ 
    background: #fff; 
    height: 30px; 
    box-shadow: 0px 0.5px 5px 0.5px #888; 
    border: 0px; 
    font-family: "Roboto"; 
    font-size: 16px; 
    color: #888; 
    float: right; 
    position: relative; 
    padding-bottom: 1em; 
}

出典

2017-07-20 Catalin Avasiloaie

残りのあなたのhtml/cssを投稿して、あなたが現在作業しているものの[mcve]を持っているようにしてください。 –

box_fl{ 
height: auto; 
background: #fff; 
box-shadow: 0px 0.5px 5px 0.5px #888; 
display: none; 
position: absolute; 

right: 0; 
bottom: 0; 


} 

.buton_login{ 
background: #fff; 
height: 30px; 
box-shadow: 0px 0.5px 5px 0.5px #888; 
border: 0px; 
font-family: "Roboto"; 
font-size: 16px; 
color: #888; 
float: right; 
position: relative; 
top:50px; 
left:170px; 
padding-bottom: 1em; 
}

出典

2017-07-20 18:51:44

位置を上と左に追加する必要があります –

これは私のためには機能しませんでした。私は2番目のdivと同じ結果を持っています。ちょうど最初のものがメニューバーの下側に移動しました。 –

。私が理解すれば、2つのdivを垂直に整列させて整列させたいと思う。それがあなたの探しているものなら。ここに私の目的があります。まず、HTMLコード：

<body> 
    <div class="menu"> 
    <div class="menu_active_zone"> 
     <h1>Title</h1> 
     <div id="login"> 
      <button class="buton_login">AUTENTIFICARE/INREGISTRARE</button> 
      <div class="box_fl">fdsdsfd</div> 
     </div> 
    </div> 
    </div> 
</body>

私はID #loginで別のdivを追加しました。このdivを使用すると、divを垂直に揃えることができます。次に、CSSコード：

.menu 
    { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    } 
    #login 
    { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    }

ちょうどフレキシボックスの使用とセンタリングするための仕組みと垂直alignementを説明するためのものです。 HTML要素を縦横にブロックとして表示します。

表示：フレックスはフレキシボックス（デフォルトでは、行の要素を表示）
フレックス方向を使用することを示します、行は正当化コンテンツを要素
を表示する方法の列を示し：centerは1番目の軸の中心要素を示します
align-items：centerは2番目の軸の中心要素を示します

あなたはあなたのコードにそれを統合でき、それがあなたが探しているものです。

幸運を祈る！

出典

2017-07-20 19:08:44 Arrabidas92

2つのdivの整列が正しくない

答えて

関連する問題