2つのdiv間の垂直距離

Question

私が直面している問題を解決するのに役立つ人がいますか？私は2つのdivの間にスペースを設定しようとしていますが、これを行うと両方のdivを一緒に移動します。次のように私のコードは次のとおり

@charset "utf-8"; 
 

 
/* CSS Document */ 
 

 
* { 
 
    box-sizing: border box; 
 
} 
 
body { 
 
    background-image: url(../images/nature_beach-1280x800.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
html { 
 
    height: 100%; 
 
} 
 
#container { 
 
    background-color: rgba(255, 255, 255, .50); 
 
    height: 65%; 
 
    width: 30%; 
 
    box-sizing: border-box; 
 
    transform: translate(200%, 20%); 
 
    font-family: Myriad Pro; 
 
    font-size: 20px; 
 
} 
 
#login { 
 
    text-align: center; 
 
    padding: 5%; 
 
    font-weight: bold; 
 
} 
 
#form { 
 
    margin-top: 5%; 
 
    margin-left: 10%; 
 
} 
 
.textfield { 
 
    height: 25px; 
 
    width: 250px; 
 
    background-color: rgba(109, 207, 246, .50); 
 
    border: none; 
 
} 
 
.fieldname { 
 
    float: left; 
 
} 
 
.textbox { 
 
    float: right; 
 
    margin-right: 10% 
 
} 
 
#container2 { 
 
    /*What should I put here??*/ 
 
}

<div id="container"> 
 
    <div id="login"> 
 
    Login 
 
    </div> 
 
    <div id="form"> 
 
    <div id="container1"> 
 
     <span class="fieldname">Username</span> 
 
     <span class="textbox"><input class="textfield" type="text" /></span> 
 
    </div> 
 
    <div id="container2"> 
 
     <span class="fieldname">Password</span> 
 
     <span class="textbox"><input class="textfield" type="text" /></span> 
 
    </div> 
 
    </div> 
 
</div>

Iマージントップを設定した場合：5％CSS中にcontainer2するために、両方のdivマージンに応じて移動します。私がしたいのは、2つのdivの間の可変スペースです。コンテナ2へのパディングはレイアウトを混乱させる。

私を助けてください。

Answer 1

https://jsfiddle.net/y30tosp5/

Demo LINK

あなたは、COSは、divのものが両親の高さを増加させない高さゼロを持つ要素浮かべていました。
もっと知りたいのであれば、clearfixについて読んでください。

#container1{ 
    overflow: auto 
} 
#container2{ 
    margin-top: 2%; 
    overflow: auto 
} 

What is a clearfix?ここにいくつかの情報があります。
そして、この問題を回避するために、エーテルインラインブロックまたはフレックスボックスを使い始める方がよいでしょう。

Answer 2

あなたが使用することができ、最終的な結果が予想と本当にあなたの方法がわからない:)

の確認異なる値

に変換ここでのポイントは何ですか？右の要素といくつかの垂直方向の整列を整列するには？質問はここに翻訳の目的については不明である:)

@charset "utf-8"; 
 

 
/* CSS Document */ 
 

 
* { 
 
    box-sizing: border box; 
 
} 
 
body { 
 
    background-image: url(../images/nature_beach-1280x800.jpg); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
html { 
 
    height: 100%; 
 
} 
 
#container, #container2 { 
 
    background-color: rgba(255, 255, 255, .50); 
 
    height: 65%; 
 
    width: 30%; 
 
    box-sizing: border-box; 
 
    transform: translate(200%, 20%); 
 
    font-family: Myriad Pro; 
 
    font-size: 20px; 
 
} 
 
#login { 
 
    text-align: center; 
 
    padding: 5%; 
 
    font-weight: bold; 
 
} 
 
#form { 
 
    margin-top: 5%; 
 
    margin-left: 10%; 
 
} 
 
.textfield { 
 
    height: 25px; 
 
    width: 250px; 
 
    background-color: rgba(109, 207, 246, .50); 
 
    border: none; 
 
} 
 
.fieldname { 
 
    float: left; 
 
} 
 
.textbox { 
 
    float: right; 
 
    margin-right: 10% 
 
} 
 
#container2 { 
 
    /*What should I put here??*/ 
 
    
 
    transform: translate(200%, 40%); 
 
}

<div id="container"> 
 
    <div id="login"> 
 
    Login 
 
    </div> 
 
    <div id="form"> 
 
    <div id="container1"> 
 
     <span class="fieldname">Username</span> 
 
     <span class="textbox"><input class="textfield" type="text" /></span> 
 
    </div> 
 
    <div id="container2"> 
 
     <span class="fieldname">Password</span> 
 
     <span class="textbox"><input class="textfield" type="text" /></span> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

まずあなたがここに構文エラーがあります。

*{ 
    box-sizing:border box; 
} 

それは、ボーダーボックスです。

それから私はあなたの構造はここdivとspanの交換を少し変更します。

<div id="form"> 
    <div id="container1"> 
     <div class="fieldname">Username</div> 
     <div class="textbox"><input class="textfield" type="text" /></div> 
    </div> 
    <div id="container2"> 
     <div class="fieldname">Password</div> 
     <div class="textbox"><input class="textfield" type="text" /></div> 
    </div> 
</div> 

そしてmargin:auto;と正しくフォームコンテナを中央にtranlateプロパティを削除します。

その後、私はあなたが望んでいたよう#container2にマージントップを追加することができました。ただ、これらのスタイルを追加します

#container2{ 
    margin-top : 20px; 
} 

See a live example

Answer 4

：

#container1 { 
    margin-bottom: 18px; 
    overflow: auto; 
    width: 380px; 
} 
#container2 { 
    overflow: auto; 
    width: 380px; 
}