Làm thế nào để tăng chiều rộng của khung khi số lượng các quả bóng tăng

Question

here is my code

.containerSlave { 
    display: inline-flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    margin: 2px 2px 2px 2px; 
    padding: 2px 2px 2px 2px; 
    height: 220px; 
    /*item height x 10*/ 
    border: 2px solid red; 
} 

.containerSlave .ball { 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    line-height: 20px; 
    text-align: center; 
    text-shadow: 0 1px 1px #000; 
    font-size: 15px; 
    color: #ffffff; 
    margin: 2px 2px 2px 2px; 
    background: radial-gradient(circle at 20px 15px, #7FBBFC, #000); 
} 

khi bóng đang bị tình trạng chiều cao hạn chế và tự động chuyển hướng theo chiều dọc của nó, làm thế nào để làm cho quả bóng được bảo hiểm trong khung. Khung sẽ tăng chiều rộng của nó khi số lượng bóng tăng lên.

Answer 1

Sử dụng document.getElementById("containerSlave").style.width = s + "px"; với s là kích thước mới trong pizels (số nguyên). Bạn sẽ cần thêm thuộc tính width vào CSS.

#containerSlave { 
    display: inline-flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    margin: 2px 2px 2px 2px; 
    padding: 2px 2px 2px 2px; 
    height: 220px; 
    /*item height x 10*/ 
    border: 2px solid red; 
    width: <!-- yourwidth --> px 
} 

Lưu ý: Thay đổi <div class="containerSlave">-<div id="containerSlave">

Answer 2

OK Tôi đang sử dụng Mozilla và điều này dường như làm việc. Đây là mã ban đầu của bạn nhưng tôi đã đặt chiều rộng cố định ở containerSlave thành 75px.

Điều này sẽ hoạt động và không có vẻ xấu nhưng phải trung thực bạn sẽ cần sử dụng mã bên ngoài như JS (javascript). Nếu bạn cởi mở với điều đó, tôi có thể cho bạn thấy một mẹo hay để sửa nó.

.containerSlave { 
    display: inline-flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
    margin: 2px 2px 2px 2px; 
    padding: 2px 2px 2px 2px; 
    height: 220px; 

    **width:75px;** 

    /*item height x 10*/ 
    border: 2px solid red; 
} 

.containerSlave .ball { 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    line-height: 20px; 
    text-align: center; 
    text-shadow: 0 1px 1px #000; 
    font-size: 15px; 
    color: #ffffff; 
    margin: 2px 2px 2px 2px; 
    background: radial-gradient(circle at 20px 15px, #7FBBFC, #000); 
}