2011-05-25 63 views
0

如果您可以閱讀標題...一個叫做JWT,另一個叫做Alela Diane ..我如何獲得「Alela Diane」來填充它們之間的空間(沒有雙關語打算)如何實現浮動:CSS/HTML中的頂部

這些div的CSS屬性設置爲顯示:inline-block。

enter image description here

的HTML - >

<div id="shastra_display"> 

<div class="shastra_post"> 
    There are multiple div's like this containing the Alela Diane's and JWT's etc. 
</div> 

</div> 

的CSS - >

#shastra_display 
{ 
    width: 880px; 
} 

#shastra_display div 
{ 
    display: inline-block; 
    vertical-align: text-top; 
} 

.shastra_post 
{ 
    width: 270px; 
    background-color: light-grey; 
} 
+0

你可以把一些代碼......所以我們可以使用和findout解決 – Anish 2011-05-25 10:50:07

+0

它總是隻有兩列嗎? – thirtydot 2011-05-25 10:53:32

+0

這是兩列,因爲父框的寬度只允許兩個適合。 – Zach 2011-05-25 10:55:03

回答

0

你或許應該以正確顯示的項目使用2列模板。

1

是否總是隻有兩個 列? - thirtydot

這是兩列,因爲 父框允許只有兩個適合。 - Zach

因此,列數根據瀏覽器寬度而變化。

這意味着你不能 「欺騙」,並做這樣的(由@Stefy的建議):

不是固定的列數

其他,CSS可以」不要這樣做。看到這個答案的想法比較:

你將不得不使用JavaScript。不過已經有了convienient jQuery插件:jQuery Masonry

一些有趣的演示:

+0

感謝這個人,我試了一下。會讓你知道結果如何。 – Zach 2011-05-25 11:36:30