Вертикално подравняване не inline-block

[stairs]

Здравейте!

Някой знае ли защо елементите от примера се нареждат така? Аз очаквах да са подравнени долните страни на зеления и червения квадрат. Като сложа overflow:hidden се оправя, но някой знае ли коя е причината да се нареждат така и къде евентуално мога да прочета повече, че не открих?


Благодаря!

Пример: http://jsfiddle.net/Yft8q/

 

[syneidesys]

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <style>
  body {
    padding: 0px;margin: 0px;
  }

   div {display:inline-block; }
#red {background:red;}
#green {background:green;}
#red, #green {width:100px; height:100px;}
#yellow {background:yellow; width:60px; height:60px;position: absolute;}


  </style>
</head>

<body>
  <div id='red'>
</div><div id='green'>
   <div id='yellow'>
    </div>
</div>
</body>

</html>

Нещо таквоз ли искаше да се получи?

 

[anonimen]

Aз мисля, че просто зеленият квадрат трябва да е с 40px по-нагоре:
http://jsfiddle.net/Yft8q/1/
Ако и това не помогне, stairs най-добре отдели 20 секунди и да нарисува какво иска, иначе няма как да разберем какво търси

 

[stairs]

Благодаря ви за отговорите! Може би не съм си задала въпроса както трябва, моля да ме извините. Въпросът ми е по-скоро теоретичен. По моята логика на супер начинаеща в CSS, ако два елемента са сиблингс, те би трябвало да са подравнени, т.е да излизат на една линия (както е в примерите и на двата отговора, които получих, само че там е указано нарочно да е така). В случая ако си го оставим така, червения див се подравнява отдолу с чайлда на другия див, които ми се струва странно. Та питах дали това нещо го има обяснено някъде, за да мога да хвана логиката, ако има такава. Например за маргините като не ми беше ясно разбрах за margin collapsing, може да се прочете на много места, но в случая нищо не откривам??? Дали аз нещо съм в грешка?

 

[inferno16]

Просто сложи position на yellow

 

[Revelation]

Абре и с float: left става, но кой да се сети.

http://jsfiddle.net/Yft8q/2/
http://jsfiddle.net/Yft8q/3/

 

[anonimen]

Втория линк ли да беше видял ?

О, извинявай :roll: :roll: Трия се...

 

[adrian]

http://jsfiddle.net/Yft8q/5/

Единственото нещо, от което имаш нужда е vertical-align: top;
Повече по темата ако ти е интересно защо http://stackoverflow.com/questions/10020617/trouble-floating-divs-correctly

 

[Revelation]

Абре и с float: left става, но кой да се сети.

http://jsfiddle.net/Yft8q/2/
http://jsfiddle.net/Yft8q/3/

Става, но пък тогава има леко разместване на жълтото квадратче - отива леко надясно (при мен). Затова вместо

div {display:inline-block; margin-left: 5px; }
#red {background:red;}
#green {background:green;}
#red, #green {width:100px; height:100px; float: left; }
#yellow {background:yellow; width:60px; height:60px; float: left;}

, трябва
div {display:inline-block; }
#red {background:red;}
#green {background:green; margin-left: 5px;}
#red, #green {width:100px; height:100px; float: left; }
#yellow {background:yellow; width:60px; height:60px; float: left;}

http://jsfiddle.net/Yft8q/4/

Втория линк ли да беше видял ?