inline-block yếu tố lồng trong một yếu tố inline-block có offsetTop

Question

Tôi mới HTML học và bây giờ tôi có một số mã như

<div id="container" style="height:300px;width:500px;font-size:0"> 
    <div id="leftBox" style="display: inline-block; background: pink; width: 50%; height: 100%;"> 
     <div id="wrapper" style="height:10%;"> 
      <div style="display: inline-block; background: red; width: 50%; height: 100%;"></div> 
      <div style="display: inline-block; background: blue; width: 50%; height: 100%;"></div> 
     </div> 
    </div> 
    <div id="rightBox" style="display: inline-block; background: green; width: 50%; height: 100%;"></div> 
</div> 

(Và tôi đăng nó trên http://jsfiddle.net/Simon_Chan/Z3WyA/)

Bạn có thể thấy leftBox có offsetTop lớn, nhưng nếu không có chiều cao wrapperhoặcwrapper 's là 100% hoặc không có rightBoxhoặc không có elemen ts trong wrapper, trong tất cả các điều kiện này leftBox không có offsetTop.

Tại sao phải làm như vậy? Và làm thế nào để loại bỏ nó?

Cảm ơn!

Answer 1

Để khắc phục vấn đề bạn cần phải thêm vertical-align:top để #leftBoxhoặc#rightBox

Lý do là giá trị mặc định vertical-align là baseline mà

Canh lề đường cơ sở của hộp với đường cơ sở của hộp cha mẹ

Đường cơ sở của hộp chính là cuối cái hộp.

Baseline được định nghĩa là

dòng khi mà hầu hết chữ "ngồi" và dưới đây mà xuống của mở rộng

Tất cả các trường hợp bạn mô tả trong kết quả câu hỏi trong đường cơ sở được thay đổi mà Canh lề các yếu tố như mong muốn.

Ví dụ tốt về đường cơ sở là mã sau trong đó không có phần tử nào trong trình bao bọc của bạn <div> nhưng văn bản cỡ chữ rất lớn thay thế. Bạn có thể thấy dưới cùng của xanh<div> được sắp xếp ngay cơ sở của phụ huynh (các chấm viền màu đỏ <div>) và làm thế nào hồng<div> s văn bản làm cho nó di chuyển đến nơi văn bản nó ngồi trên phụ huynh đường cơ sở.

<div style="height:300px;width:500px;font-size:0;border:1px dotted red"> 
    <div style="display: inline-block; background: pink; width: 50%; height: 100%;"> 
     <div style="height:100%;font-size:150px">foo</div> 
    </div> 
    <div style="display: inline-block; background: green; width: 50%; height: 100%;"></div> 
</div> 

Answer 2

Điều đó có nghĩa là do cách các hộp khác nhau nằm trên đường cơ sở. Cách đơn giản nhất để loại bỏ vấn đề là sắp xếp chúng theo chiều dọc khác nhau. ví dụ. sử dụng div {vertical-align:top }

Để xem cách hộp khối nội tuyến nằm trên đường cơ sở theo mặc định, hãy xem http://jsfiddle.net/veCEf/. Lưu ý đặc biệt cách các hộp div chặn nội tuyến mà không có bất kỳ nội dung nào có phần dưới cùng của hộp nằm trên đường cơ sở, trong khi một khi chúng có nội dung, phần dưới cùng của nội dung của chúng nằm trên đường cơ sở.