在facebook朋友框之后发行div

Question

每次我把facebook朋友的代码都包括在框下面的div元素框就会变得古怪。 我无法控制它的位置。 它要么消失，要么重叠不同的div。 本来我只想要特价，活动，然后fbFriends连续然后在三个div之下的方框div。 我一直试图包裹div来控制一切，但仍然没有成功。 任何帮助，将不胜感激

特价活动fbFriends

盒子-------------------盒子

<div id="specialsWrapper">
        <div id="specials" ><p>Featured Specials</p></div>
        <div id="events" ><p>What's happening at the hub</p></div>
        <div id="fbFriends">
            <div  class="fb-like-box" 
                data-href="https://www.facebook.com/pages/********" 
                data-height="395" data-width="250" data-show-faces="true" 
                data-colorscheme="dark" data-stream="false" data-header="true" />
        </div>
    </div>
</div>
<div id="box" ></div>

#specialsWrapper
{
    height: 450px;
    width: 920px;
    color: white;
}

#specials {
    float: left;
    border:2px dashed white; 
    height:390px;
    width: 270px;
    color: white;
    margin: 25px 10px 0px 48px;
}

#specials p {
    margin: 0px;
    padding: 15px;
    text-transform:uppercase;
    font-size: 24px;
    font-style: oblique;
}


#events {
    float: left;
    border:2px dashed white; 
    height:390px;
    width: 270px;
    color: white;
    margin: 25px 15px 15px 15px;
}

#events p {
    margin: 0px;
    padding: 15px;
    text-transform:uppercase;
    font-size: 24px;
    font-style: oblique;
}

#fbFriends {
    float: left;
    margin: 25px 15px 15px 15px;
    width: 250px;
    height:390px; 
}

#box
{
    clear: left;
    border: 2px dashed white;
    height: 60px;
    width: 853px;
    color: white;
    margin: 25px 15px 15px 48px;
}

Answer 1

我想你可能想要它显示的内容：inline-block; 但没有什么可看的，我真的不知道发生了什么。 你的描述还不够。 你能发布js.fiddle.net上发生的事情还是给我们一个示例网站？

Answer 2

这里有关于你的问题的问题。 关于CODEPEN的例子

你构建这些盒子很奇怪，这就是为什么我必须使用top: 40px; position: relative;

顺便说一句。 这就是你对jsfiddle或codepen例子的看法，这就是所有社区都在问的问题。 花5分钟你的问题不是很多问？

希望有所帮助。

编辑：

我找到了什么问题，你没有关闭specialsWrapper div这就是为什么margin dint工作。 我还从specialWrapper中的框中取消margin-botton并将overflow：auto添加到specialWrapper以计数。 现在顶部：不需要写。