Satır içi blok öğelerim düzgün sıralanmıyor

İçerideki tüm öğeler .track-container, tuhaf kenar boşlukları veya dolgu olmadan kendilerine verilen 200 piksel yüksekliğiyle sınırlandırılarak, her biri yan yana güzel ve aynı hizada olmalıdır. Bunun yerine, yukarıda bahsedilen kemanla ortaya çıkan tuhaflığa sahipsiniz.

Sayfanın yarısına kadar itilmesine neden olan şey nedir .album-artworkve .track-infobunu nasıl düzeltebilirim? Ayrıca, bir tablonun tüm bu kuruluma yaklaşmanın daha iyi bir yolu olabileceğini kabul ediyorum, ancak sorunu yukarıdaki koddan anlamak istiyorum, böylece bu hatadan bir şeyler öğrenebilirim.

.track-container {
    padding:0;
    width: 600px;
    height: 200px;
    border: 1px solid black;
    list-style-type: none;
    margin-bottom: 10px;
}

.position-data {
    overflow: none;
    display: inline-block;
    width: 12.5%;
    height: 200px;
    margin: 0;
    padding: 0;
    border: 1px solid black;
}

.current-position, .position-movement {
    height: 100px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid black;
}

.album-artwork {
    display: inline-block;
    height: 200px;
    width: 20%;
    border: 1px solid black;
}

.track-info {
    display: inline-block;
    padding-left: 10px;
    height: 200px;
    border: 1px solid black;
}

<div class="track-container">
    <div class="position-data">
        <div class="current-position">1</div>
        <div class="position-movement">2</div>
    </div>
    <div class="album-artwork">fdasfdsa</div>
    <div class="track-info">fdafdsa</div>
</div>

İşte bir JSFiddle .

10.8 Çizgi yüksekliği hesaplamaları: 'satır yüksekliği' ve 'dikey hizalama' özellikleri

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

Bu, inline-blockunsurları içeren yaygın bir sorundur . Bu durumda, varsayılan değeri vertical-alignözellik olduğunu baseline. Değeri olarak değiştirirseniz, topbeklendiği gibi davranacaktır.

Güncellenmiş Örnek

.position-data {
    vertical-align: top;
}

İçinde elemanları .track-containerolan içi seviyesi aynı kutular çizgi kutu .

Bu nedenle, dikey hizalamaları vertical-alignözellik tarafından belirtilir :

Bu özellik, bir satıriçi seviyedeki eleman tarafından oluşturulan kutuların bir çizgi çerçevesi içindeki dikey konumlandırmayı etkiler.

Varsayılan olarak değeri baseline:

Kutunun satır taban çizgisini üst kutunun satır taban çizgisiyle hizalayın. Kutunun taban çizgisi yoksa, alt kenar boşluğunu ebeveynin taban çizgisi ile hizalayın.

Bu durumda, hepsinin, aşağıdakilere göre hesaplanan temelleri vardır:

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

Aşağıdaki resim ne olduğunu açıklığa kavuşturuyor (kırmızı çizgi temel çizgidir):

Bu nedenle şunları yapabilirsiniz

• Elemanların dikey hizalamasını değiştirin, örneğin top, middleveyabottom

  .track-container > * {
    vertical-align: middle;
  }
  

  Kod parçacığını göster

  .track-container {
    padding: 0;
    width: 600px;
    height: 200px;
    border: 1px solid black;
    list-style-type: none;
    margin-bottom: 10px;
  }
  .position-data {
    overflow: none;
    display: inline-block;
    width: 12.5%;
    height: 200px;
    margin: 0;
    padding: 0;
    border: 1px solid black;
  }
  .current-position,
  .position-movement {
    height: 100px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid black;
  }
  .album-artwork {
    display: inline-block;
    height: 200px;
    width: 20%;
    border: 1px solid black;
  }
  .track-info {
    display: inline-block;
    padding-left: 10px;
    height: 200px;
    border: 1px solid black;
  }
  .track-container > * {
    vertical-align: middle;
  }

  <div class="track-container">
    <div class="position-data">
      <div class="current-position">1</div>
      <div class="position-movement">2</div>
    </div>
    <div class="album-artwork">fdasfdsa</div>
    <div class="track-info">fdafdsa</div>
  </div>

  Kod parçacığını çalıştırınSonuçları gizle

  Snippet'i genişlet

• Set overflowdaha farklı bir şey için elemanların visible, örneğin hiddenya autoda bazal onların alt kenar boşluğu kenar olacak böylece.

  .track-container > * {
    overflow: hidden;
  }
  

  Kod parçacığını göster

  .track-container {
    padding: 0;
    width: 600px;
    height: 200px;
    border: 1px solid black;
    list-style-type: none;
    margin-bottom: 10px;
  }
  .position-data {
    overflow: none;
    display: inline-block;
    width: 12.5%;
    height: 200px;
    margin: 0;
    padding: 0;
    border: 1px solid black;
  }
  .current-position,
  .position-movement {
    height: 100px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid black;
  }
  .album-artwork {
    display: inline-block;
    height: 200px;
    width: 20%;
    border: 1px solid black;
  }
  .track-info {
    display: inline-block;
    padding-left: 10px;
    height: 200px;
    border: 1px solid black;
  }
  .track-container > * {
    overflow: hidden;
  }

  <div class="track-container">
    <div class="position-data">
      <div class="current-position">1</div>
      <div class="position-movement">2</div>
    </div>
    <div class="album-artwork">fdasfdsa</div>
    <div class="track-info">fdafdsa</div>
  </div>

  Kod parçacığını çalıştırınSonuçları gizle

  Snippet'i genişlet

• Öğelerin akış içi çizgi kutusu olmadığından emin olun, böylece taban çizgileri alt kenar kenarları olur. Yani, içerik akış dışı olmalıdır :

  Bir öğe yüzer, mutlak şekilde konumlandırılırsa veya kök öğe ise akış dışı olarak adlandırılır . Akış dışı değilse bir öğe akış içi olarak adlandırılır .

  Örneğin, öğelerin içeriğini bir sarmalayıcıya yerleştirebilir ve şununla biçimlendirebilirsiniz float: left:

  .track-container > * > .wrapper {
    float: left;
  }
  

  Kod parçacığını göster

  .track-container {
    padding: 0;
    width: 600px;
    height: 200px;
    border: 1px solid black;
    list-style-type: none;
    margin-bottom: 10px;
  }
  .position-data {
    overflow: none;
    display: inline-block;
    width: 12.5%;
    height: 200px;
    margin: 0;
    padding: 0;
    border: 1px solid black;
  }
  .current-position,
  .position-movement {
    height: 100px;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 1px solid black;
  }
  .album-artwork {
    display: inline-block;
    height: 200px;
    width: 20%;
    border: 1px solid black;
  }
  .track-info {
    display: inline-block;
    padding-left: 10px;
    height: 200px;
    border: 1px solid black;
  }
  .track-container > * > .wrapper {
    float: left;
  }

  <div class="track-container">
    <div class="position-data">
      <div class="current-position wrapper">1</div>
      <div class="position-movement wrapper">2</div>
    </div>
    <div class="album-artwork">
      <span class="wrapper">fdasfdsa</span>
    </div>
    <div class="track-info">
      <span class="wrapper">fdafdsa</span>
    </div>
  </div>

  Kod parçacığını çalıştırınSonuçları gizle

  Snippet'i genişlet

Bu iki öğeye dikey hizalama: top eklemeniz gerekir:

.album-artwork, .track-info {
    vertical-align:top;
}

jsFiddle örneği

Varsayılan dikey hizalama taban çizgisidir, ancak bunun yerine üst kısmını arıyorsunuz.

Veya float:left;3 öğeye ayarlayabilirsiniz .

http://jsfiddle.net/fC2nt/

Hizalamaya çalıştığınız tüm öğelerdeki satır yüksekliği oranının da aynı olduğundan emin olun. DIV, P, H1-5, DT, DD, INPUT, BUTTON etiketlerinin bir karışımını kullanıyorsanız, bu aynı zamanda başka yerde tanımladığınız şeye bağlı olarak dikey hizalamada düzensizliklere de neden olacaktır.