把头饰粘在一起

Is there anyway to make divs sort of glue to each other no matter the size that they have?

有没有什么办法可以让divs变得粘在一起不管他们有多大?

http://imgur.com/mxODPnk

http://imgur.com/mxODPnk

I've tried searching and the float:left works but for example in the image above the yellow div will make the brown and green not appear in the location like in the image, but below the line of the yellow.

我已经尝试过搜索和浮动:左对齐，但是例如，在图片上面的黄色div会使棕色和绿色不像图片中那样出现在位置上，而是在黄色的线下面。

I've tried using display: inline-block but it still doesn't work.

我尝试过使用display: inline-block，但它仍然不起作用。

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

here is a jfiddle that represents what my question is: http://jsfiddle.net/sezcY/

下面是一个jfiddle，它表示我的问题:http://jsfiddle.net/sezcY/

Simply look at div six positioning. It should be below three and it has a huge margin.

只需看看div six的定位。它应该在3以下，而且有很大的利润空间。

I guess I'd have to rearrange the order of the divs through JQuery?

我想我需要通过JQuery重新排列div的顺序?

2 个解决方案

#1

They are inline, increase the size of the result pane and check it.

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

However when the with of the screen or the body element decreases, few DIV element may move down

然而，当屏幕的with或body元素减少时，很少有DIV元素会向下移动

Fix to that problem

解决这一问题

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

change the selectors

改变选择器

#2

If you want two DIVs stick together, put them into two cells (in one row or in two rows, as you like) of one table – they will keep their position to each other and won't drift apart, if you narrow down the window.

如果你想让两个DIVs粘在一起，把它们放在一张桌子上的两个单元格里(如你所愿，在一排或两排)——如果你把窗户缩小一点，它们将保持彼此的位置，不会彼此分开。