Divs在彼此旁邊

很難解釋我的問題是什麼，我試着谷歌搜索這裏的問題。我找不到任何人有同樣的問題。我希望我的div像Google一樣安排記事本。所有的div應該在彼此之中，並且只在邊緣之間沒有空間。爲了理解我的意思，我在JSFiddle中發佈了一張圖片（我沒有權利在這裏發佈圖片）。Divs在彼此旁邊

.col { 
    display: inline; 
    width: 200px; 
    border: 1px solid red; 
    margin: 5px; 
    vertical-align: top; 
} 

<div class="col">Some content...</div> 
<div class="col">Some content...</div> 
<div class="col">Some content...</div> 
<div class="col">Some content...</div> 
<div class="col">Some content...</div>

http://jsfiddle.net/5t6tm/14/

來源

2014-04-23 truemiro

爲什麼不使用表？ –

認爲你必須使用一點點的js。 [這是一個很好的插件]（http://masonry.desandro.com/） – Pete

是的，我認爲沒有js它不會工作。 – truemiro

我一直沒能實現這個沒有過去的JavaScript。

你可能想看看砌體，這是一個jquery插件，幾乎完全符合你的要求。

http://masonry.desandro.com

或者，你可能會考慮其數的div列，每列有一個明確的寬度和飄然左邊還是右邊？

.column { 
    width: 50%; 
    float: left; 
} 

<div class="column"> 
    <div class"item">Lorem ipsum</div> 
    <div class"item">Lorem ipsum</div> 
    <div class"item">Lorem ipsum</div> 
</div> 
<div class="column"> 
    <div class"item">Lorem ipsum</div> 
    <div class"item">Lorem ipsum</div> 
</div>

這可能是一個可接受的解決方案，雖然它會影響您的語義和可能的響應。

來源

2014-04-23 09:29:05 Joshua

你只是打敗了我：http://jsfiddle.net/5t6tm/20/ –

我必須用JS解決這個問題。來自GeenHenk的解決方案對我無效 – truemiro

簡單的js解決方案是wookmark：http://davidwalsh.name/wookmark – truemiro

.col { 
display: inline-block; 
width: 200px; 
border: 1px solid red; 
margin: 5px; 
vertical-align: top; 
float: left; 
} 



    <div class="col">Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content...</div> 
<div class="col">Some content... Some content... Some content... Some content...</div> 
<div class="col">Some content... Some content... Some content... Some content...</div> 
<div class="col">Some content...</div> 
<div class="col">Some content... Some content... Some content...</div> 
<div class="col">Some content... Some content... Some content...</div> 
<div class="col">Some content... Some content... Some content...</div>

來源

2014-04-23 19:15:36

'display：inline-block;'should work。當你這樣做時，注意html中的空格。 – Costa

Divs在彼此旁邊

回答

相關問題