Question

我对margin-top无效的原因感到困惑。这是我的代码：

HTML：

<div class="container-extended-blog">
    <div class="offers-for-week">
        <h1 class="title offers-for-this-week">offers for this week</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
        <img src="img/extended_blog_pic.jpg" alt="image of recipe">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
    </div><!-- /.offers-for-week -->
</div><!-- /.container-extended-blog -->

SCSS：

.container-extended-blog {
    margin-top: 200px;
    margin-left: 300px;
    background-color: $blue-ot;
    width: 350px; 
    height: 450px;
    overflow: hidden;
    p {
        font-family: $content-font;
        color: $icon-font-color;
    }
}

我尝试添加position: relative;，我发现这种情况通常会发生，但是我不知道为什么这种情况不起作用，并且真的很想理解！

Answer 1

将position:absolute;添加到.container-extended-blog

.container-extended-blog {
top: 200px;
margin-left: 300px;
background-color: $blue-ot;
width: 350px; 
height: 450px;
overflow: hidden;
position:absolute;
}

或

将top: 200px;更改为margin-top: 200px;

.container-extended-blog { margin-top: 200px; margin-left: 300px; background-color: $blue-ot; width: 350px; height: 450px; overflow: hidden; }

请参阅：http://jsfiddle.net/Q5xdf/

保证金顶部不工作div

1 个答案: