Как пополнить выравнивать DIV внутри другого DIV

Question

Привет

Я хочу, чтобы поместить div2 верхними выравнивать с границей Div1 в

До сих пор я попытался это для Div 2, но он сделал не работает хорошо

element.style { 
    float: right; 
    position: relative; 
    vertical-align: top; 
} 

Это не выровняло div в верхнем положении, что могло быть исправлением, чтобы сделать его выровненным по высоте?

Answer 1

Я бы добиться этого с помощью position: absolute; на ребенка, как сказано выше , но вместо добавления дополнительного div в DOM для имитации использования пробела я бы использовал псевдоэлемент (точнее, ::before pseudo-element).

Это структура я использовал для этого:

<div class="parent"> 
    <div class="child"> 

    </div> 
    <h1>Start</h1> 
</div> 

DIV с классом родителя должен быть position: relative;, и ребенок должен быть абсолютным к нему и установить, чтобы быть top: 0; как следующие строки объясните:

.child { 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 100px; 
    background-color: #000; 
} 

Вам понадобится установить этот элемент фиксированной высоты и ширины, иначе он не будет работать.

Проблема такого подхода заключается в том, что у вас будет div, который будет поверх первых 100px вашего .parent div.

Чтобы решить эту проблему, мы должны создать псевдо-элемент на .parent DIV, который будет имитировать, что пространство и сделать все лучше работать:

.parent:before { 
    display: block; 
    content: ' '; 
    width: 100%; 
    height: 100px; 
} 

Вот рабочая скрипка с примером кодом, надеюсь, это поможет вам !

http://jsfiddle.net/m54rxwjv/2/

PS: Это будет работать только если вы знаете, что высота всегда будет 100px.

Answer 2

Дайте позицию относительно вашего родительского div и абсолютную позицию для внутреннего div. Не забудьте установить верх: 0px для внутреннего div, после чего ваш внутренний div всегда будет на вершине вашего родительского div.

#div1{position:relative;} 
#div2{position:absolute;top:0px;} 

Answer 3

.div1{ 
 
box-sizing: border-box; 
 
    border: 3px solid red; 
 
    height: 150px;  
 
    width: 30px; 
 
} 
 
.div2{ 
 
box-sizing: border-box; 
 
border: 3px solid green; 
 
margin: -3px; 
 
height: 30px; 
 
width: 30px; 
 
}

<div class="div1"> 
 
<div class="div2"></div> 
 
</div>

Answer 4

.div1{ 
box-sizing:border-box; 
-webkit-box-sizing:border-box; 
-moz-box-sizing:border-box; 
position:relative; 
} 

.div2{ 
box-sizing:border-box; 
-webkit-box-sizing:border-box; 
-moz-box-sizing:border-box; 
position:relative; 
top:0; 
left:0; 
} 

div2 всегда в верхней

Answer 5

Согласно ответу Vipul, я есть создать код надрезается на jsfiddle для же поведения:

http://jsfiddle.net/zo6jdp4b/1/

Я поставил один дополнительный DIV на вершине и так, что один не имеют никакой проблемы в детской Div CSS:

.childDiv{ 
border: 1px solid blue; 
height: 10px; 
width: 30px; 
position:absolute; 
top: 0px; 

}