如何增加框架的寬度時的球的數量增加

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); 
}

當球是在有限的高度的狀態，並自動地改變其長度方向，如何使被內所覆蓋的球幀。隨着球數增加，框架會增加其寬度。

Want to show the following

來源

2015-04-01 Duke

這是一個已知的問題：http://stackoverflow.com/questions/28882458/flex-box-container-width-doesnt-grow – 2015-04-01 14:03:04

的Flex-Box有一些已知問題。 http://caniuse.com/#search=flex-box 它還需要一個用於Safari的webkit前綴。 – AJStacy 2015-04-05 23:59:43

使用document.getElementById("containerSlave").style.width = s + "px";與s是在pizels新的大小（整數）。您需要將一個width屬性添加到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 
}

注：更改我使用Mozilla的<div class="containerSlave">到<div id="containerSlave">

來源

2015-04-07 22:40:44

如果你想展示一個現場演示，請使用[Stack Snippet]（https://meta.stackoverflow.com/questions/269753/feedback-requested-runnable-code-snippets-in-questions-and-answers ）而不是鏈接到你自己的網站。 – 2015-04-08 00:02:37

OK，這似乎工作。這是你的原始代碼，但我設置的寬度固定在containerSlave到75px。

這將工作，看起來不壞，但老實說，你將需要使用外部代碼，如JS（JavaScript）。如果你願意，我可以給你一個很好的解決方法。

.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); 
}

來源

2015-04-07 22:57:39 Jtuck

如何增加框架的寬度時的球的數量增加

回答

相關問題