如何在CSS中均勻分佈？

嗨，大家好，我想均勻地分佈圖的框。什麼是最好的方法來做到這一點？如何在CSS中均勻分佈？

#centreContent { 
    margin-left: auto; 
    margin-right: auto; 
    padding: 100px; 
    margin-top: 150px; 
    width: 70%; 

    /* border: 1px solid black; */ 
} 

figure{ 
    font-size: 12px; 
    float: left; 
    border: 1px solid black; 
    padding: 20px; 
    margin: 5px; 
    text-align: center; 
    width: 200px; 
    height: 250px; 
    overflow:hidden; 
    -webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;border:3px solid #ADADAD;background-color:#D4D4D4;-webkit-box-shadow: #FFFFFF 2px 2px 2px;-moz-box-shadow: #FFFFFF 2px 2px 2px; box-shadow: #FFFFFF 2px 2px 2px; 
}

有無限數量的數字......基本上......我希望他們都有相等的間距。

<div id="centreContent"> 
    <figure></figure> 
    <figure></figure> 
    <figure></figure> 
    <figure></figure> 
    <figure></figure> 
</div>

來源

2013-10-26 Butterflycode

關閉投票，您的問題不清楚，請花一些時間來編輯和有點詳細解釋一下 –

請描述你想要的更多具體是什麼結果是。使用你當前的代碼會發生什麼，你期望/打算髮生什麼？ http://jsfiddle.net鏈接中的演示可能會對您有所幫助。 – nbrooks

我會建議使用grid 960系統或類似的東西。網格960使用12列網格行佈局，均勻分佈即時div。這非常靈活，您可以使用多種不同的組合。它實現了你所追求的。希望這有助於。

CSS：

.container_12{width:98%;margin-left:1%;margin-right:1%;} 
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12{display:inline;float:left;position:relative;margin-left:1%;margin-right:1%;}  
    .container_12 .grid_1{width:6.333%;} 
    .container_12 .grid_2{width:14.667%;} 
    .container_12 .grid_3{width:23%;} 
    .container_12 .grid_4{width:31.333%;} 
    .container_12 .grid_5{width:39.667%;} 
    .container_12 .grid_6{width:48%;} 
    .container_12 .grid_7{width:56.333%;} 
    .container_12 .grid_8{width:64.667%;} 
    .container_12 .grid_9{width:73%;} 
    .container_12 .grid_10{width:81.333%;} 
    .container_12 .grid_11{width:89.667%;} 
    .container_12 .grid_12{width:100%!important;margin-left:0!important;margin-right:0!important; }

標記：

<div class="container_12"> 
    <div class="grid_6"></div> 
    <div class="grid_6"></div> 
</div> 


<div class="container_12"> 
    <div class="grid_4"></div> 
    <div class="grid_4"></div> 
    <div class="grid_4"></div> 
</div> 


<div class="container_12"> 
    <div class="grid_3"></div> 
    <div class="grid_3"></div> 
    <div class="grid_3"></div> 
    <div class="grid_3"></div> 
</div>

編輯

關於你的最後一個職位的編輯，如果你不知道的數字位數領先時間你不能實現這個w如果使用純粹的CSS解決方案，您可能需要一些JavaScript來根據div的總數重新計算每個div的寬度。

來源

2013-10-26 05:29:45

我得到了它與內嵌塊工作...

#centreContent { 
    margin-left: auto; 
    margin-right: auto; 
    padding: 100px; 
    margin-top: 150px; 
    width: 70%; 
    text-align: justify; 
    -ms-text-justify: distribute-all-lines; 
    text-justify: distribute-all-lines; 
    /* border: 1px solid black; */ 
} 

figure{ 
    vertical-align: top; 
    display: inline-block; 
    *display: inline; 
    zoom: 1; 
    font-size: 12px; 
    border: 1px solid black; 
    padding: 20px; 
    margin: 5px; 
    text-align: center; 
    width: 200px; 
    height: 250px; 
    overflow:hidden; 
    -webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius: 30px;border:3px solid #ADADAD;background-color:#D4D4D4;-webkit-box-shadow: #FFFFFF 2px 2px 2px;-moz-box-shadow: #FFFFFF 2px 2px 2px; box-shadow: #FFFFFF 2px 2px 2px; 
}

來源

2013-10-26 05:49:36 Butterflycode

如何在CSS中均勻分佈？

回答

相關問題