Các phần tử khối nội tuyến của tôi không được sắp xếp đúng cách

Tất cả các phần tử bên trong .track-containerphải xếp hàng đẹp và thẳng hàng, mỗi bên cạnh nhau, bị giới hạn bởi chiều cao 200px mà chúng đã được cung cấp mà không có lề hoặc phần đệm kỳ lạ. Thay vào đó, bạn có sự kỳ lạ xảy ra trong trò chơi khó nói trên.

Điều gì đang gây ra .album-artworkvà .track-infobị đẩy xuống nửa trang và làm cách nào để khắc phục? Ngoài ra, tôi thừa nhận rằng một bảng có thể là cách tốt hơn để tiếp cận toàn bộ thiết lập này, nhưng tôi muốn tìm ra vấn đề từ đoạn mã trên để tôi có thể học hỏi từ sai lầm này.

.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>

Đây là một JSFiddle .

10.8 Tính toán chiều cao dòng: thuộc tính 'line-height' và 'vertical-align'

Đường cơ sở của 'khối nội tuyến' là đường cơ sở của hộp dòng cuối cùng của nó trong quy trình bình thường, trừ khi nó không có hộp dòng trong dòng hoặc nếu thuộc tính 'tràn' của nó có giá trị được tính khác ngoài 'hiển thị', trong trường hợp nào thì đường cơ sở là cạnh lề dưới cùng.

Đây là một vấn đề phổ biến liên quan đến inline-blockcác yếu tố. Trong trường hợp này, giá trị mặc định của thuộc vertical-aligntính là baseline. Nếu bạn thay đổi giá trị thành top, nó sẽ hoạt động như mong đợi.

Ví dụ cập nhật

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

Các phần tử bên trong .track-containerlà các hộp cấp dòng trong cùng một hộp dòng .

Do đó, căn chỉnh dọc của chúng được chỉ định bởi thuộc vertical-aligntính:

Thuộc tính này ảnh hưởng đến vị trí thẳng đứng bên trong hộp dòng của các hộp được tạo bởi phần tử cấp nội tuyến.

Theo mặc định, giá trị của nó là baseline:

Căn chỉnh đường cơ sở của hộp với đường cơ sở của hộp mẹ. Nếu hộp không có đường cơ sở, hãy căn chỉnh cạnh lề dưới cùng với đường cơ sở của hộp chính.

Trong trường hợp này, tất cả chúng đều có đường cơ sở, được tính toán theo

Đường cơ sở của 'khối nội tuyến' là đường cơ sở của hộp dòng cuối cùng của nó trong quy trình bình thường, trừ khi nó không có hộp dòng trong dòng hoặc nếu thuộc tính 'tràn' của nó có giá trị được tính khác ngoài 'hiển thị', trong trường hợp nào thì đường cơ sở là cạnh lề dưới cùng.

Hình ảnh sau đây làm rõ những gì đang xảy ra (đường màu đỏ là đường cơ sở):

Do đó, bạn có thể

• Thay đổi căn chỉnh theo chiều dọc của các phần tử, ví dụ: thành top, middlehoặcbottom

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

  Hiển thị đoạn mã

  .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>

  Chạy đoạn mãẨn kết quả

  Mở rộng đoạn mã

• Đặt các overflowphần tử thành một cái gì đó khác với visible, ví dụ hiddenhoặc auto, để đường cơ sở của chúng sẽ là cạnh lề dưới cùng của chúng.

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

  Hiển thị đoạn mã

  .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>

  Chạy đoạn mãẨn kết quả

  Mở rộng đoạn mã

• Đảm bảo các phần tử không có hộp dòng trong dòng, để đường cơ sở của chúng sẽ là cạnh lề dưới cùng của chúng. Đó là, nội dung phải nằm ngoài luồng :

  Một phần tử được gọi là out of flow nếu nó được thả nổi, được định vị tuyệt đối hoặc là phần tử gốc. Một phần tử được gọi là trong luồng nếu nó không nằm ngoài luồng.

  Vì vậy, ví dụ: bạn có thể đặt nội dung của các phần tử trong một trình bao bọc và tạo kiểu cho nó bằng float: left:

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

  Hiển thị đoạn mã

  .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>

  Chạy đoạn mãẨn kết quả

  Mở rộng đoạn mã

Bạn cần thêm vertical-align: top vào hai phần tử đó:

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

ví dụ jsFiddle

Căn chỉnh theo chiều dọc mặc định là đường cơ sở, nhưng thay vào đó bạn đang tìm hàng trên.

Hoặc bạn có thể đặt float:left;thành 3 phần tử.

http://jsfiddle.net/fC2nt/

Đảm bảo rằng tỷ lệ chiều cao dòng trên tất cả các phần tử bạn đang cố gắng căn chỉnh cũng giống nhau. Nếu bạn đang sử dụng kết hợp các thẻ DIV, P, H1-5, DT, DD, INPUT, BUTTON, điều này cũng sẽ gây ra sự bất thường trong căn chỉnh dọc tùy thuộc vào những gì bạn đã xác định ở nơi khác.