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

这是你问题的答案 EXAMPLE ON CODEPEN

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

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

希望有所帮助。

修改

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

在facebook朋友框之后发行div

2 个答案: