2012-02-10 23 views
6

Một div có nền tảng dễ đọc. Chiều cao của div này sẽ phụ thuộc vào nội dung của nó. Tôi cần div để kéo dài bởi nhiều kích thước của hình nền.CSS: Đặt div là chiều cao là bội số của một số?

Ví dụ: nền là hình ảnh 64x64. Vì vậy, nếu chiều cao của div là tăng, tôi muốn làm như vậy bằng các bước 64px.

Điều này có thể thực hiện với CSS không? Tôi đã không tìm thấy khách hàng tiềm năng bằng cách sử dụng google. Cảm ơn vì đã dành thời gian cho tôi!

+1

javascript có được chấp nhận không? – ANeves

+3

Bạn không thể làm điều này trong css - nói chung, css không cho phép bạn đặt kiểu có điều kiện khi nội dung của phần tử có kích thước động. – Oliver

+1

Trong css đơn giản nó không thể đạt được. Hãy thử jQuery cho điều đó. – NewUser

Trả lời

6

Theo hiểu biết của tôi, điều này không thể thực hiện được trong CSS, nhưng bạn có thể giải quyết nó bằng một số javascript. Nếu bạn có quyền truy cập vào jQuery:

$(function() { 
    $div = $('#the_div_id'); 
    var remainder = $div.height() % 64; 
    var newHeight = $div.height() + (64-remainder); 
    $div.css('height', newHeight); 
}); 
+0

Nó có thể được giải quyết bằng javascript ngay cả khi không có jQuery. – Rob

+0

Vâng, tôi nghĩ tôi sẽ đi theo cách đó, sau khi tài liệu sẵn sàng. thanks =) – Jem

+0

Bạn được chào đón. Nhân tiện, '$ (function() {...});' là viết tắt của "làm điều này khi DOM sẵn sàng", trong trường hợp bạn mới sử dụng jQuery. Và như @Rob nói, nó có thể được thực hiện trong Javascript bản địa là tốt, tôi chỉ thích cá nhân jQuery. – Christoffer

0

Nội dung của div là gì? Có vẻ như thay vì đặt kích thước của div thành giá trị chính xác, bạn cần chú ý đến nội dung - this post chi tiết một số kỹ thuật khá đơn giản để thực hiện nhịp điệu theo chiều dọc, điều này sẽ hoạt động (ví dụ: bằng cách sử dụng chiều cao dòng 64px)

+0

Nó thực sự về một kitsch ui: div đại diện cho một bậc thang, và chiều cao của nó là tỷ lệ thuận với chiều cao của div từ phía trên cùng của màn hình - làm cho ốp lát cần thiết để kết nối với các phần tử terminator. – Jem

4

Một giải pháp (tùy thuộc vào trường hợp cụ thể của bạn) có thể là sử dụng thuộc tính CSS mới background-size. Tôi đã rời khỏi tờ khai riêng cho rõ ràng:

div.yourDiv { 
    background-image: url('yourImage.jpg'); 
    background-repeat: repeat; 
    background-size: contain; 
} 

Sau đó, bất kể kích thước của bạn div, hình ảnh của bạn sẽ gạch một cách hoàn hảo mà không bị cắt đứt. Các trình duyệt cũ hơn sẽ chỉ nhận được hình ảnh lát gạch, có thể có hoặc không có vấn đề.

+0

rất thú vị, tôi đang cố gắng thực hiện điều này ngay bây giờ! – Jem