Div нажал вниз

Question

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

Почему это толкает?

.note { 
 
    display: inline-block; 
 
    /* 
 
#F3F389-galben 
 
#96C0FF albastru 
 
#94F1B6 verde 
 
rosu#f40042 
 
*/ 
 
    background-color: #f40042; 
 
    width: 250px; 
 
    height: 250px; 
 
    margin-left: 25px; 
 
    margin-top: 25px; 
 
} 
 
textarea { 
 
    width: 80%; 
 
    height: 60%; 
 
    /*display: inline-block;*/ 
 
    margin-top: 15px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    resize: none; 
 
    background: rgba(0, 0, 0, 0.13); 
 
    border: none; 
 
    padding: 5px; 
 
    font-family: 'rancho', Helvetica, sans-serif; 
 
    font-size: 30px; 
 
} 
 
#notes { 
 
    text-align: center; 
 
}

<div id="notes"> 
 
    <div class="note"> 
 
    <textarea placeholder="Your note's text here"></textarea> 
 
    <div id="sometext">sometext</div> 
 
    </div> 
 
    <div class="note"> 
 
    <textarea placeholder="Your note's text here"></textarea> 
 
    </div> 
 

 

 
</div>

Answer 1

Поскольку ваш встроенные элементы блока являются vertically aligned относительно базовой линии по умолчанию, то есть днища содержания внутри ваших элементов выравниваются.

Измените vertical-align стиль на что-то более подходящее:

.note { 
 
    vertical-align:top; 
 
    display: inline-block; 
 
    /* 
 
#F3F389-galben 
 
#96C0FF albastru 
 
#94F1B6 verde 
 
rosu#f40042 
 
*/ 
 
    background-color: #f40042; 
 
    width: 250px; 
 
    height: 250px; 
 
    margin-left: 25px; 
 
    margin-top: 25px; 
 
} 
 
textarea { 
 
    width: 80%; 
 
    height: 60%; 
 
    /*display: inline-block;*/ 
 
    margin-top: 15px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    resize: none; 
 
    background: rgba(0, 0, 0, 0.13); 
 
    border: none; 
 
    padding: 5px; 
 
    font-family: 'rancho', Helvetica, sans-serif; 
 
    font-size: 30px; 
 
} 
 
#notes { 
 
    text-align: center; 
 
}

<div id="notes"> 
 
    <div class="note"> 
 
    <textarea placeholder="Your note's text here"></textarea> 
 
    <div id="sometext">sometext</div> 
 
    </div> 
 
    <div class="note"> 
 
    <textarea placeholder="Your note's text here"></textarea> 
 
    </div> 
 

 

 
</div>

Answer 2

Добавить float: left; или vertical-align: top; на .note класса CSS.