Bu satır içi blok öğesi neden aşağı doğru itiliyor?

Kodum aşağıda ve neden #firstDiv tüm tarayıcılar tarafından aşağı itiliyor olduğunu anlamak istiyorum . Gerçekten şu ya da bu şekilde yukarı doğru çekmekten ziyade aşağı doğru itilmesinin iç işleyişini anlamak istiyorum . (ve üstlerini nasıl hizalayacağımı biliyorum :))

Ve onun taşması olduğunu biliyorum: buna neden olan gizli ama neden bu div'i aşağı doğru ittiğinden emin değilim.

body {
  width: 350px;
  margin: 0px auto;
}

#container {
  border: 15px solid orange;
}

#firstDiv {
  border: 10px solid brown;
  display: inline-block;
  width: 70px;
  overflow: hidden;
}

#secondDiv {
  border: 10px solid skyblue;
  float: left;
  width: 70px;
}

#thirdDiv {
  display: inline-block;
  border: 5px solid yellowgreen;
}

<div id="container">
  <div id="firstDiv">FIRST</div>
  <div id="secondDiv">SECOND</div>
  <div id="thirdDiv">THIRD
    <br>some more content<br> some more content
  </div>
</div>

http://jsfiddle.net/WGCyu/ .

Temelde kodunuzda daha fazla karışıklık yaratan daha fazla karmaşa eklediniz, bu yüzden ilk önce gerçek sorunu anlamayı engelleyen karmaşayı kaldırmaya çalışıyorum.

Öncelikle, asıl sorunun ne olduğunu belirlemeliyiz? Bu yüzden " inline-block" öğesi aşağıya doğru itilir.

Şimdi anlamaya başlıyoruz ve önce dağınıklığı ortadan kaldırıyoruz.

1 - Neden üç divın tümüne aynı kenar genişliği vermiyorsunuz? Hadi verelim.

2 - Kayan elemanın inline blok eleman aşağıya doğru itilmesi ile herhangi bir bağlantısı var mı? Hayır, onunla hiçbir ilgisi yok.

Yani, bu div'i tamamen kaldırdık . Ve aynı satır içi blok elemanının aşağı doğru itilmesine tanık oluyorsunuz.

İşte bazı edebiyatların sırası, satır kutuları fikrini ve aynı satırda nasıl sıralandığını kavramak için geliyor .

'Satır içi bloğun' taban çizgisi, akış içi satır kutuları yoksa veya 'taşma' özelliği 'görünür' dışında bir hesaplanmış değere sahip değilse, normal akıştaki son satır kutusunun taban çizgisidir. bu durumda taban çizgisi alt kenar boşluğudur.

Eğer taban çizgisinden emin değilseniz, basit kelimelerle kısa bir açıklama burada.

'Gjpqy' dışındaki tüm karakterler, taban çizgisinde, bu "rastgele karakterlerin" hemen altını çizerek aynı basit bir yatay çizgi çiziyormuş gibi yazabilirsiniz. aynı satırdaki karakter (ler) varsa, bu karakterlerin alt kısmı satırın altına düşecektir.

Yani, 'gjpqy' dışındaki tüm karakterlerin taban çizgisinin tamamen üzerine yazılırken, bu karakterlerin bir kısmı taban çizgisinin altına yazıldığını söyleyebiliriz.

3 - Neden hattımızın taban çizgisinin nerede olduğunu kontrol etmiyorsunuz? Hattımızın taban çizgisini gösteren birkaç karakter ekledim .

4 - Neden div'de taban çizgilerini bulmak için div'imize bazı karakterler eklemiyoruz? Burada, taban çizgisini netleştirmek için div karakterlerine bazı karakterler eklendi .

Şimdi taban çizgisi hakkında bilgi sahibi olduğunuzda, satır içi blokların taban çizgisi hakkında aşağıdaki basitleştirilmiş sürümü okuyun.

i) Söz konusu satır içi blokun taşma özelliği görünür olarak ayarlanmışsa (varsayılan olarak ayarlanmasına gerek yoktur). Daha sonra taban çizgisi, hattın ihtiva eden bloğunun taban çizgisi olacaktır.

ii) Söz konusu satır içi blokun taşma özelliği görünür olan DİĞER THAN olarak ayarlanmışsa. Daha sonra alt kenar boşluğu, kutu kutusunun çizgisinin taban çizgisinde olacaktır.

• Ayrıntılı ilk nokta

Şimdi yeşil div ile neler olup bittiğine dair fikrinizi açıklığa kavuşturmak için buna tekrar bakın . Yine de herhangi bir karışıklık varsa, burada, yeşil bloğa yakın daha fazla karakter eklenir ve içeren bloğun taban çizgisini oluşturur ve yeşil div taban çizgisi hizalanır.

Şimdi, aynı temel çizgilere sahip olduklarını mı iddia ediyorum? SAĞ?

5 - Öyleyse neden üst üste binmiyor ve birbirlerine uygun olup olmadıklarını görmüyorsunuz? Yani, üçüncü div-left getiriyorum: 35px; Şimdi aynı temel çizgileri olup olmadığını kontrol etmek için ?

Şimdi, ilk noktamızı kanıtladık.

• Ayrıntılı ikinci nokta

İlk noktanın açıklanmasından sonra ikinci nokta kolayca sindirilebilir ve görünür (gizli) dışında bir taşma özelliğine sahip ilk divın satırın taban çizgisinde alt kenar boşluğu olduğunu görürsünüz.

Şimdi, daha fazla açıklamak için birkaç deney yapabilirsiniz.

1. İlk div taşmasını ayarlayın : görünür (veya tamamen kaldırın) .
2. İkinci div taşmasını ayarlayın : görünür değil .
3. Her iki div taşmasını da ayarlayın : görünürden farklı .

Şimdi dağınıklığınızı geri getirin ve her şeyin size iyi gelip gelmediğini görün.

1. Yüzen div'inizi geri getirin (elbette
   vücudun genişliğini arttırmanız gerekir ) Bunun bir etkisi olmadığını görüyorsunuz.
2. Aynı garip marjları geri getirin .
3. Yeşil div'i taşmaya ayarlayın : sorunuzda belirlediğiniz gibi görünür (yanlış hizalamanın kenar genişliğinin 1 pikselden 5 piksele yükseltilmesinden kaynaklandığını, bu nedenle negatif sola ayarlarsanız sorun olmadığını göreceksiniz)
4. Şimdi anlamaya yardımcı olmak için eklediğim ek karakterleri kaldırın . (ve tabii ki negatif sola kaldır)
5. Sonunda vücut genişliğini azaltın çünkü artık daha geniş olana ihtiyacımız yok.

Ve şimdi başladığımız yere geri döndük.

Umarım sorunuzu cevapladım.

İçin varsayılan değer vertical-alignCSS olan baselineve bu kural da birlikte uygulamak olan inline-blockbu okuma http://www.brunildo.org/test/inline-block.html

Yazın vertical-align:topsenin içinde inline-blockDIV.

Bu http://jsfiddle.net/WGCyu/1/ adresini kontrol edin

Sadece kullan vertical-align:top;

gösteri

Görüntüle Bu alternatif örnek. Bu tür davranışların nedeni CSS3 modülünde açıklanmaktadır : satır: 3.2. Satır Kutusu sarma [1] :

Genel olarak, bir çizgi kutusunun başlangıç ​​kenarı, içerdiği bloğun başlangıç ​​kenarına, son kenarı ise içerdiği bloğun uç kenarına temas eder. Ancak, kayan kutular, kaplayan blok kenarı ile çizgi kutusu kenarı arasına gelebilir. Bu nedenle, aynı satır içi biçimlendirme bağlamındaki satır kutuları genellikle aynı satır içi ilerleme ilerlemesine (içeren bloğunkine) sahip olsa da, kullanılabilir satır içi ilerleme alanı şamandıralar nedeniyle azaldığında değişebilir [...]

Gördüğünüz gibi, üçüncü öğe bir overflowözelliği olmamasına rağmen aşağı doğru itilir . Nedeni bulmak için başka bir yerde olmalı. Fark ettiğiniz ikinci davranış Basamaklı Stil Sayfaları Düzey 2 Revizyon 1 (CSS 2.1) içinde açıklanmıştır Özellikler: 9.5 Kayan [2] :

Bir şamandıra akışta olmadığından, şamandıra kutusundan önce ve sonra oluşturulan konumlandırılmamış blok kutuları, şamandıra yokmuş gibi dikey olarak akar. Bununla birlikte, şamandıranın yanında oluşturulan mevcut ve sonraki satır kutuları şamandıranın kenar boşluğu kutusuna yer açmak için gerektiğinde kısaltılır.

Tüm display:inline-block;div'leriniz baselinebu durumda özel bir tür kullanıyor 10.8 Satır yüksekliği hesaplamaları: 'satır yüksekliği' ve 'dikey hizalama' özellikleri (en son) [3] :

'Satır içi bloğun' taban çizgisi, akış içi satır kutuları yoksa veya 'taşma' özelliği 'görünür' dışında bir hesaplanmış değere sahip değilse, normal akıştaki son satır kutusunun taban çizgisidir. bu durumda taban çizgisi alt kenar boşluğudur.

Dolayısıyla kayan elemanlar ve inline-blockelemanlar kullanırken, kayan eleman yana doğru itilecek ve satır içi biçimlendirme 1'e göre yeniden hesaplanacaktır . Öte yandan, uymayacaklarsa bir sonraki elemanlar kısaltılır. Zaten minimum miktarda alanla çalıştığınızdan, öğelerinizi değiştirip başkalarını itmenin başka bir yolu yoktur 2 . Bu durumda, en yüksek eleman sarma div'inizin boyutunu tanımlayacak, böylece baseline 3'ü tanımlayacaktır , diğer yandan 2'de belirtilen konum ve genişlik değişikliği bu gibi minimum aralıklı maksimum yükseklik elemanlarına uygulanamaz. Bu durumda ilk demetimdeki gibi bir davranış ortaya çıkacaktır.

Son olarak, bölüm 11'de bir neden bulamasam da, alt kenarınıza itilmenizin overflow:hiddenönlenmesinin nedeni . Onsuz 2 ve 3'te istisna edildiği ve tanımlandığı gibi çalışır . gösteri#firstDiv#containeroverflow:hidden

TL; DR: W3 önerilerine ve tarayıcıdaki uygulamalara çok yakından bakın. Benim düşünceme göre, çevreleyen öğelerinizde yaptıkları tüm değişiklikleri bilmiyorsanız, yüzen öğeler beklenmedik davranışlar göstermeye kararlıdır. İşte şamandıralarla ilgili ortak bir sorun gösteren başka bir demo .

_{Başlangıçta bu soruyu cevaplamaya başladım , ancak bitirmeden önce dupe olarak kilitlendi, bunun yerine cevabı buraya gönderiyorum.}

İlk olarak, ne inline-blockolduğunu anlamalıyız . MDN'yi tanım diyor ki:

Öğe, tek bir satır içi kutu gibi çevreleyen içerikle akacak bir blok öğesi kutusu oluşturur (değiştirilen bir öğe gibi davranır)

Burada neler olduğunu anlamak için bakmamız gerekiyor vertical-alignve varsayılan değer baseline.

Bu çizimde şu renk şemasına sahipsiniz:
Mavi: Temel
kırmızı: Çizgi yüksekliğinin
üst ve altı Yeşil: Satır içi içerik kutusunun üst ve alt kısmı.

#Left öğesinde, taban çizgisinin ne olduğunu denetleyen bazı metin içeriğiniz var. Bu, içindeki metnin #left için taban çizgisini tanımladığı anlamına gelir.
#Right içinde içerik yoktur, bu nedenle tarayıcının kutunun altını taban çizgisi olarak kullanmaktan başka seçeneği yoktur.

İlk satır içi kapsayıcı bazı metin ve sonraki boş bir örnek üzerinde taban çizgisi çizdiğiniz bu görselleştirme bakın:

Bir öğeyi özellikle üste hizalarsanız, bu öğenin üstünü satır kutusunun üstüne hizaladığınızı gerçekten söylersiniz.

Bunu bir örnekle anlamak daha kolay olabilir.

div {
    display: inline-block;
    width: 100px;
    height: 150px;
    background: gray;
    vertical-align: baseline;
}
div#middle {
    vertical-align: top;
    height: 50px
}
   
div#right {
    font-size: 30px;
    height: 100px
}

<div id="left">
  <span>groovy</span>
</div>
<div id="middle">groovy</div>

<div id="right">groovy</div>

Sonuç bu - ve mavi taban çizgisini ve kırmızı çizgi kutusunu ekledim: Burada olan şey, çizgi kutusunun yüksekliğinin tüm satırın içeriğinin nasıl düzenlendiğine bağlı olmasıdır. Bu, üst hizalamayı hesaplamak için önce taban çizgisi hizalamalarının hesaplanması gerektiği anlamına gelir. Elemanı vardır , bu nedenle bu taban konumlandırma için kullanılmaz. ancak ve , taban çizgileri hizalanacak şekilde dikey olarak konumlandırılır. Bu yapıldığında, satır kutusunun yüksekliği arttı, çünkü öğe daha büyük yazı tipi boyutunun bir sonucu olarak biraz yukarı itildi. Daha sonra elemanın üst konumu hesaplanabilir ve bu, satır kutusunun üst kısmı boyunca bulunur.
#middlevertical-align:top#left#right#right#middle

sorun şamandıra uygulamanızdır: ikinci div'da kaldı. bu da ikinci div'in sol tarafa gelmesini sağlar ve ilk div'iniz düşer ve ikinci div'inizden sonra gelir. Şamandıra uygularsanız: ilk div'de bırakılırsa, sorununuz ortadan kalkacaktır.

taşma: gizli düzeninizde sorun yaratmaz, taşma: gizli bir div öğesinin yalnızca iç öğelerini etkiler, dışarıdaki diğer öğelerle ilgisi yoktur.

padding:0;Vücuda eklemeyi ve div'lerinizin marjını kaldırmayı deneyin .

background-color:*anyFarkı kontrol etmek için arkaplandan * renk ekleyin .

Tüm Elements öğelerinin tüm CSS özelliklerini aynı yapmayı deneyin.

Ben benzer bir sorun vardı ve bunu giderirken ben Div özelliği yazı tipi özelliği olan bir Element bırakarak tespit etti.

Bu Element'i Font özelliğine bıraktıktan sonra tüm DIV'lerin hizalanması bozuldu. Bunu düzeltmek için Font özelliğini tüm DIV öğelerine, içine bırakılan öğeyle aynı şekilde ayarladım.

Aşağıdaki örnekte, ".dldCuboidButton" sınıfının Bırakılan öğesi, font boyutu ile tanımlanmıştır: 30 px.

Bu yüzden DIV öğeleri tarafından kullanılan .cuboidRecycle, .liCollect, .dldCollect gibi sınıflara aynı özelliği ekledim. Bu şekilde, tüm DIV elemanı, elemanı içine atmadan önce ve sonra aynı Ölçümleri takip eder.

.cuboidRecycle {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.liCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#cab287;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}

.dldCollect {
    height:40px; 
    width:'20px; float:right';
    overflow:'none';
    background-color:#009933;
    color:#ffffff; 
    border-radius:8px; 
    text-align:'center'; 
    vertical-align:'top';
    display: inline-block;
    font-size: 30px; /* Set a font-size */
}


.dldCuboidButton {
    background-color:  #7c6436;
    color: white; /* White text */
    font-size: 30px; /* Set a font-size */
    border-radius: 8px;
    margin-top: 1px;
  }

Yukarıdaki CSS kullanılarak dinamik olarak oluşturulan HTML örneği.

$("div#tabs").append(
  "<div id='" + newTabId + "'>#" + uniqueId + 
  "<input type=hidden id=hdn_tmsource_" + uniqueId + "  value='" + divTmpfest + "'>" + 
  "<input type=hidden id=leCuboidInfo_" + uniqueId + " value=''>" + 
  "<div id='" + divRecycleCuboid + "' class=cuboidRecycle ondrop='removeDraggedCuboids(event, ui)'  ondragover='allowDrop(event)'><font size='1' color='red'> Trash bin </font></div>" +
  "<div id='" + divDropLeCuboid  + "' class=liCollect ondrop='dropForLinkExport(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Manifest Cuboid here</font></div>" +
  "<div id='" + divDropDwldCuboid  + "' class=dldCollect ondrop='dropForTMEntry(event)'  ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Cuboids here..</font></div>" +
  "</div>" 
);