Làm cách nào để đặt khoảng cách giữa các div động?

Question

tôi có một div cha, có thể thay đổi kích thước của nó, tùy thuộc vào không gian có sẵn. Trong div đó, tôi có các div nổi. Bây giờ, tôi muốn có khoảng cách giữa các div, nhưng không có không gian để div cha mẹ (xem bản vẽ).

Có cách nào để làm điều này với CSS không?

Cảm ơn bạn

Answer 1

Tôi tìm thấy một giải pháp, trong đó ít nhất giúp trong hoàn cảnh của tôi, thì có lẽ nó không phù hợp với các tình huống khác:

tôi cung cấp cho tất cả các con xanh của tôi divs một biên độ hoàn chỉnh:

margin: 10px; 

Và đối với xung quanh div mẹ vàng tôi đặt một biên độ tiêu cực:

margin: -10px; 

tôi cũng đã phải loại bỏ bất kỳ chiều rộng rõ ràng hoặc chiều cao thiết lập cho các div cha mẹ màu vàng, nếu không nó đã làm n ot làm việc. Bằng cách này, về mặt tuyệt đối, các div con được căn chỉnh chính xác, mặc dù div màu vàng cha mẹ rõ ràng được đặt ra, trong trường hợp của tôi là OK, bởi vì nó sẽ không được hiển thị.

Answer 2

Thêm margin để div style của bạn

margin:0 10px 10px 0; 

http://www.w3schools.com/css/css_margin.asp

Answer 3

Há chẳng phải chỉ là một trường hợp áp dụng một lớp phù hợp với từng div?

Ví dụ:

.firstRowDiv { margin:0px 10px 10px 0px; } 
.secondRowDiv { margin:0px 10px 0px 0px; } 

này phụ thuộc vào nếu bạn biết trước đó div để áp dụng mà lớp.

Answer 4

Xin lỗi vì đã trả lời một bài đăng cũ, nhưng bạn có thể làm như sau:

Giả sử div chứa của bạn có lớp "vàng".

.yellow div { 
    // Apply margin to every child in this container 
    margin: 10px; 
} 

.yellow div:first-child, .yellow div:nth-child(3n+1) { 
    // Remove the margin on the left side on the very first and then every fourth element (for example) 
    margin-left: 0; 
} 

.yellow div:last-child { 
    // Remove the right side margin on the last element 
    margin-right: 0; 
} 

Số 3n + 1 bằng mọi phần tử thứ tư outputted và rõ ràng sẽ chỉ làm việc nếu bạn biết có bao nhiêu sẽ được hiển thị trong một hàng, nhưng nó phải minh họa ví dụ. More details regarding nth-child here.

Lưu ý: Đối với: con đầu tiên làm việc trong IE8 trở về trước, phải khai báo <!DOCTYPE>.

Lưu ý2: Bộ chọn: n-child() được hỗ trợ trong tất cả các trình duyệt chính, ngoại trừ IE8 trở về trước.

Answer 5

Tôi đã trễ bữa tiệc nhưng ... Tôi đã có tình huống tương tự xuất hiện và tôi đã phát hiện padding-right (và cuối cùng, trên cùng, bên trái cũng vậy). Từ cách tôi hiểu định nghĩa của nó, nó đặt một khu vực đệm bên trong bên trong div do đó không cần phải thêm một lề âm trên phụ huynh như bạn đã làm với một lề.

padding-right: 10px; 

Điều này đã giúp tôi!

Answer 6

Câu trả lời cuối cùng của litte.

Nếu bạn muốn sử dụng lưới như thế này, bạn nên xem Bootstrap, Cài đặt tương đối dễ dàng và cung cấp cho bạn chính xác những gì bạn đang tìm kiếm, tất cả được bao bọc trong html/css đẹp và đơn giản hoạt động dễ dàng để làm cho trang web đáp ứng.