div行在一行

Question

hy伙计们。我有一个小问题。

我试图在一个符号线上创建一个带有div的框。

问题在于，如果我开始一个新的div，它位于他面前的那个顶部，而不是在他旁边。

我尝试使用float left或border-sizing并显示表格单元格。一切都没有用。 http://www.awesom-media.de/umgebung/index.html

它是绿背景的那个。

这部分应该是4个图标div。两个已经存在。如果访问者点击每个图标，在红色框中会显示一些内容。

但问题就像我说我不能把两个图标（魔术棒和星星）放在一行。

Answer 1

使用display: inline-block

DEMO http://jsfiddle.net/kevinPHPkevin/GAA9e/

div {
    width: 50px;
    height: 50px;
    background: #ccc;
    display: inline-block;
}

Answer 2

你需要将每个div（魔法和魔杖）的css属性添加到float：left;并且webicons div清除：left;

#magic { float:left; }
#wand { float:left; }
#webicons  { clear: left; height:110px; }

DEMO - http://jsfiddle.net/J4QWq/3/

Answer 3

试试这个，我在每个图标中添加了float: left;，并在height: 100%;中添加了.webicons，如下所示：

JSFIDDLE

希望这有帮助！