2013-08-23 100 views
4

无论如何,无论他们拥有什么样的尺寸,都可以将divs排序胶水胶水彼此相邻

http://imgur.com/mxODPnk

我试图寻找和float:left作品,但例如黄色DIV上图中将使棕色和绿色不会出现在像图像中的位置,但对线下黄色。

我试过使用显示器:inline-block但它仍然无法正常工作。

.glue-div{ 
    margin-left: 10px; 
    border: 1px solid black; 
    color: orange; 
    float: left; 
    background: #303030; 
} 

这里是代表我的问题是什么jfiddle:http://jsfiddle.net/sezcY/

单纯看DIV 6点的定位。它应该在3以下,并且有很大的余量。

我想我必须通过JQuery重新安排div的顺序吗?

+3

[masonry](http://masonry.desandro.com/)做你想做的事吗? – Liam

+0

请尝试http://masonry.desandro.com/ –

+0

谢谢你们都会仔细研究它! ;) 我很抱歉,我不知道这一点,我甚至不知道如何搜索我想要的东西。猜猜我学到了一个新单词:cascading :) – FPJ

回答

2

它们是内联的,增加结果窗格的大小并检查它。

Image showing they are inline

然而,当与屏幕或本体元件减小的,很少DIV元件可以

修复向下移动到该问题

/* Mobile browsers only */ 
@media only screen and (max-device-width: 480px) { 
    .newsletter_input { 
     width: 320px; 
    } 
    .newsletter_input #form{ 
     font-size:42pt 
    } 
} 

变化选择器

1

如果你想两个DIV粘在一起,把他们分为两个单元格(一排或两排,只要你喜欢)一张桌子 - 如果您缩小窗口,它们将保持彼此的位置并且不会分开。