div行在一行

时间:2013-09-04 19:03:13

标签: html css

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

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

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

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

它是绿背景的那个。

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

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

3 个答案:

答案 0 :(得分:2)

使用display: inline-block

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

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

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

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

JSFIDDLE

希望这有帮助!