asp.net - 在 Facebook 好友框之后发布放置 div

Question

每次我包含 facebook friend 喜欢的代码时，下面的 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

这是您问题的答案 EXAMPLE ON CODEPEN

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

顺便说一句。这就是你在 jsfiddle 或 codepen 示例上所做的，这就是所有社区的要求。花 5 分钟回答你的问题，问的不多吗？

希望对您有帮助。

编辑:

我发现了问题所在，您没有关闭 specialsWrapper div 这就是 margin dint 起作用的原因。我还取消了 specialWrapper 内框的 margin-botton，并将 overflow: auto 到 specialWrapper 到 countheight。现在置顶:不用写了。