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

S

stairs

Registered
Здравейте!

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


Благодаря!

Пример: http://jsfiddle.net/Yft8q/
 
Код: 
<!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>

Нещо таквоз ли искаше да се получи?
 
Aз мисля, че просто зеленият квадрат трябва да е с 40px по-нагоре:
http://jsfiddle.net/Yft8q/1/
Ако и това не помогне, stairs най-добре отдели 20 секунди и да нарисува какво иска, иначе няма как да разберем какво търси
 
Благодаря ви за отговорите! Може би не съм си задала въпроса както трябва, моля да ме извините. Въпросът ми е по-скоро теоретичен. По моята логика на супер начинаеща в CSS, ако два елемента са сиблингс, те би трябвало да са подравнени, т.е да излизат на една линия (както е в примерите и на двата отговора, които получих, само че там е указано нарочно да е така). В случая ако си го оставим така, червения див се подравнява отдолу с чайлда на другия див, които ми се струва странно. Та питах дали това нещо го има обяснено някъде, за да мога да хвана логиката, ако има такава. Например за маргините като не ми беше ясно разбрах за margin collapsing, може да се прочете на много места, но в случая нищо не откривам??? Дали аз нещо съм в грешка?
 
Абре и с float: left става, но кой да се сети.

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

Единственото нещо, от което имаш нужда е vertical-align: top;
Повече по темата ако ти е интересно защо http://stackoverflow.com/questions/10020617/trouble-floating-divs-correctly
 
anonimen каза:
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/
Увеличете...

Втория линк ли да беше видял ?
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе