Tôi cần thêm một pixel vào div cha

Question

Tôi có một div cho "lớp học" chứa div cho mỗi "sinh viên". Mỗi div "sinh viên" chứa một hình ảnh. Dưới đây là HTML:

<div class="classroom"> 
    <div class="student"> 
     <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/f.AmzRdUdc4pEtCuGvU03WXQ.jpg"> 
    </div> 

    <div class="student"> 
     <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/k.jXX55KhHUWZGTAb-GpPkdg.jpg"> 
    </div> 

    <div class="student"> 
     <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/c.ZKQXc2Kc8-po-OK6AhDbtw.jpg"> 
    </div> 
</div> 

Tôi muốn hiển thị tất cả các "sinh viên" divs trong một dòng vì vậy tôi sử dụng css sau:

body { 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
} 

html, body { 
    height: 100%; 
} 

.classroom { 
    position: relative; 
    height: 100%; 
} 

.classroom .student { 
    position: relative; 
    height: 100%; 
    float: left; 
} 

.classroom .student .student-image { 
    height: 100%; 
} 

Để các sinh viên sẽ có đủ chỗ trong " lớp học "div, tôi sử dụng jQuery để tính toán chiều rộng của" lớp học ":

$(document).ready(function() { 
    var w = 0; 
    $(".student").each(function() { 
     w += $(this).width(); 
    }); 
    $(".classroom").width(w); 
}); 

Thật không may là kết quả không phải là những gì tôi mong đợi. Div "sinh viên" cuối cùng sẽ chuyển sang dòng tiếp theo (như thể không có float: left; được chỉ định). Kỳ lạ hơn là khi tăng chiều rộng của div "Lớp học" trong 1 pixel, div sẽ trả về vị trí đó ở cuối dòng đầu tiên.
Tôi đã thực hiện các jsfiddles đó: Ở đây http://jsfiddle.net/U3gBG bạn có thể thấy sự cố. nhấp vào bảng kết quả và sử dụng các phím mũi tên để cuộn xuống và sang phải.
Ở đây http://jsfiddle.net/U3gBG/1/ bạn có thể xem kết quả của việc thêm 1 vào chiều rộng của div "lớp học" sau khi tính toán (chiều rộng của "lớp học" bằng tổng của "sinh viên" chiều rộng cộng với 1 pixel). Kết quả này là những gì tôi cần.
Tôi không hiểu tại sao tôi cần phải tăng chiều rộng của div cha bằng 1? Tại sao tổng hợp tất cả chiều rộng con divs là không đủ?

Answer 1

Vì vậy, dựa trên nhận xét của Eyal, tôi đã tò mò về những gì đang xảy ra ở gốc của vấn đề này. Trên hệ thống của tôi, tôi nhận thấy rằng Chrome được bọc, nhưng IE và FF thì không. Sau khi đào nhiều hơn, tôi phát hiện ra rằng gói là do diện tích màn hình hiển thị.

Bạn đang định cỡ phụ huynh bằng jQuery, nhưng khi chia cho ba bạn sẽ làm tròn. Trong một số trường hợp, vòng tròn làm cho vùng chứa quá hẹp đối với hình ảnh và hình ảnh kết thúc thứ ba. Nếu nó tròn lên thì bạn có đủ chỗ và không có gói nào xảy ra.

Giải pháp tôi đã đăng bên dưới là câu trả lời mạnh mẽ hơn vì nó tự động tính toán lại trên kích thước của trình duyệt. Bạn sẽ phải chạy js của bạn liên tục và theo dõi thay đổi kích thước sự kiện để xử lý điều này với JS. Hy vọng rằng sẽ giúp.

---

Thay vì sử dụng javascript, bạn có thể sử dụng CSS thay thế không?

Đặt student thành display:inline. Sau đó, đặt parent thành white-space:nowrap. Họ sẽ không quấn. Tiếp theo, bạn phải xử lý khoảng trắng giữa các hình ảnh. Vì chúng tôi hiện đã đặt chúng thành inline bất kỳ khoảng trắng nào trong html gây ra khoảng trống. Vì vậy, nếu bạn đặt `font-size: 0px 'trên vùng chứa hình ảnh, nó sẽ thu hẹp khoảng cách. Hãy nhớ đặt phông chữ trở lại số lượng dương nếu vùng chứa cần chứa văn bản. Không gây rối với js yêu cầu.

http://jsfiddle.net/U3gBG/8/

body { 
    padding: 0; 
    margin: 0; 
    overflow: hidden; 
} 

html, body { 
    height: 100%; 
} 


.classroom { 
    white-space: nowrap; 
    height: 100%; 
    font-size: 0px; 
} 

.classroom .student { 
    height: 100%; 
    display: inline; 
} 

.classroom .student .student-image { 
    height: 100%; 
}​ 

Answer 2

khi tôi xem xét điều này trong IE9 dưới màn hình gỡ lỗi tôi kiểm tra yếu tố hình ảnh và các yếu tố div của bạn và có vẻ như chiều rộng của hình ảnh đầu tiên là 999,95 và KHÔNG phải là một số tròn như vậy là hai hình ảnh khác có giá trị chiều rộng không nguyên.

có vẻ như một số trình duyệt sẽ làm tròn số này và một số sẽ làm tròn số này, vì vậy bạn có thể sử dụng css như được đề xuất trong câu trả lời khác hoặc bạn chỉ cần thêm pixel +1 như bạn đang làm HOẶC bạn có thể sử dụng hàm parseint() hoặc một số loại hàm tròn để đảm bảo hình ảnh của bạn sẽ có đủ chỗ trong div cha.

EDIT:

tôi nghĩ rằng vấn đề này xuất phát từ giá trị css của height: 100%, đây menas rằng chiều rộng được tính toán và không cố định với kích thước hình ảnh thực tế, do đó giá trị số nguyên không cho chiều rộng bằng pixel, vì vậy trong để tiếp tục sử dụng phương pháp đặt hình ảnh này, bạn sẽ phải sử dụng math.ceil() hoặc một cái gì đó có tính chất đó khi cộng tổng chiều rộng của div gốc.

Answer 3

u có thể sử dụng ul li

<ul style="float:left; List-style:none;"> 
<li><img src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/f.AmzRdUdc4pEtCuGvU03WXQ.jpg"></li> 
<li> <img src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/k.jXX55KhHUWZGTAb-GpPkdg.jpg"></li> 
<li> <img src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/c.ZKQXc2Kc8-po-OK6AhDbtw.jpg"></li> 
    </ul> 

và Fix kích thước hình ảnh của bạn

Answer 4

chia chúng ra thành 3 lớp thay vì phải họ đi qua một chuỗi các cách bạn có chúng. Thay vì phải

.classroom { 
    white-space: nowrap; 
    height: 100%; 
} 

.classroom .student { 
    height: 100%; 
    display: inline-block; 
    float: left; 
} 

.classroom .student .student-image { 
    height: 100%; 
}​ 

chỉ làm cho họ

.classroom { 
    white-space: nowrap; 
    height: 100%; 
} 

.student { 
    height: 100%; 
    display: inline-block; 
    float: left; 
} 

.student-image { 
    height: 100%; 
}​ 

vì vậy bạn có mỗi một định nghĩa .... bây giờ như xa như các vấn đề bạn đang nhận được, đó là bởi vì bạn không đủ cụ thể trong CSS của bạn với cách bạn muốn mọi thứ được, bạn có chiều rộng hoặc chiều cao thiết lập, bạn chỉ có nổi thiết lập để te sinh tố, do đó, nó dễ dàng cho nó để làm những thứ kỳ lạ. Hãy thử một cái gì đó giống như ..

.classroom { 
    width:308px; 
    height:100px; 
    float:left; 
    margin-left:0px; 
} 

.student { 
    height:100px; 
    width:100px; 
    margin-left:2px; 
    float: left; 
} 

.student-image { 
    height: 100px; 
    width:100px; 
    float:left; 
}​ 

idk nếu thông số kỹ thuật chính xác tôi đã sẽ lớn đủ cho bức ảnh của bạn, nhưng chỉ để cho bạn thấy làm thế nào bạn nên cố gắng nhận được một số quyền kiểm soát họ ... và chú ý đến thông số kỹ thuật tôi đã cho chiều rộng. lớp học rộng 308 pixel, sau đó học sinh rộng 100 pixel với lề trái là 2 pixel, vì vậy, 3 học sinh sẽ chia khung 100 pixel với lề 2 pixel trên mỗi tổng số tối đa 306 pixel, để 2 pixel cho bên phải khung hình sinh viên cuối cùng, vì vậy tất cả đều tăng lên .. tính toán nó ra tuy nhiên bạn cần nó và xem xét các lề. Hy vọng điều này sẽ giúp ... :)