Вертикальное расстояние между двумя divs

Question

может кто-то помочь исправить проблему, с которой я столкнулся. Я пытаюсь установить пространство между двумя div, но это делает оба divs вместе. Мой код выглядит следующим образом:

@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>

Когда я установил маржу-топ: 5% до container2 в CSS, как дивы двигаться по краю. То, что я хочу сделать, - это переменное пространство между двумя div. Заполнение контейнера2 испортит макет.

Пожалуйста, помогите мне.

Demo LINK

Answer 1

https://jsfiddle.net/y30tosp5/ Вы были элементы с нулевой высоты, потому плавали DIV те не увеличивают высоту родителей.
Читайте о clearfix, если хотите узнать больше.

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

What is a clearfix? вот дополнительная информация.
И, как сказано, лучше начать использовать эфир inline-block или flexbox, чтобы избежать этой проблемы раз и навсегда.

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; 
} 

Это границы коробки.

Тогда я немного изменить битовую структуру, заменяющий span с div прямо здесь:

<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> 

И удалить tranlate свойство правильно отцентрировать вид контейнера с margin:auto;.

Тогда я был в состоянии добавить маржин-сверху #container2, как вы хотели:

#container2{ 
    margin-top : 20px; 
} 

See a live example

Answer 4

Просто Добавьте эти стили:

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