html - CSS 遇到负边距问题

Question

在我使用负边距之前:HTML:

<div class="blog-piece">
    <div class="blog-letter">
        <div class="blog-letter1">4.12</div>
        <div class="blog-letter2">CSS</div>
    </div>
    <div class="blog-piece-content">
        <p class="blog-content-headp">This is the heading of the article</p>
        <p class="blog-content-shead">This is the heading of the article</p>
        <p class="blog-content-mainp">This is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the article</p>
        <p class="blog-content-footerp">Your name 2015-06-01</p>
    </div>
</div>

CSS:

    .blog-letter{
    width: 55px;
    float: left;
}

    .blog-letter1{
        background-color: #522A5C;
        text-align: center;
        width:55px;
        height: 40px;
    }

和结果(firefox):

现在我将 blog-letter 的边距设置为 -55px(这是它的宽度)，但是 blog-letter 消失了。 以下是我修复后的代码: CSS:

    .blog-letter{
    width: 55px;
    float: left;
    margin-left: -55px;
}
.blog-letter1{
    background-color: #522A5C;
    text-align: center;
    width:55px;
    height: 40px;
}

但是没用(消失了)，我只想把blog-letter设置在主要内容之外，像这样:

负边距怎么办？

Answer 1

根据您的 div.blog-piece 是否还有可用空间，这里有两种方法可以实现您想要的:

如果有空间，将div.blog-letter绝对定位在div.blog-piece之外，需要有position: relative; 让它按照您期望的方式工作。

如果没有可用空间，请给 .blog-piece-content margin-left: 55px;。

在此处查看两种解决方案的实际应用:

http://codepen.io/anon/pen/KpWWBe

如果由于某种原因解决方案 1 也使 div.blog-letter 消失，那一定是 div.blog-piece 或它周围的某个容器有 溢出:隐藏；。