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）： enter image description here

现在我设置blog-letter的边距是-55px（这是它的宽度），但blog-letter消失了。 enter image description here 以下是修复后的代码： CSS：

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

但它不起作用（它消失了），我只想在主要内容中设置博客字母，如下所示： enter image description here

如何以负边际做到这一点？

Answer 1

根据div.blog-piece是否还有剩余空间，以下是实现目标的两种方法：

如果空间可用，请将div.blog-letter绝对置于div.blog-piece之外，其中position: relative;需要.blog-piece-content才能按预期方式工作。

如果没有可用空间，请margin-left: 55px;一个div.blog-letter。

请参阅此处的两个解决方案：

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

如果出于某种原因，解决方案1也会使div.blog-piece消失，则必须是overflow: hidden;或其周围的某个容器<h:commandButton class="uploadButton" onclick="monitor();" value="Upload" update="msgsuccess" action="#{appUploadBean.uploadApp()}"/> <p:outputPanel id="parentPanel" style="display:none"> <div id="uploadPForm:msgupload" class="ui-messages ui-widget" aria-live="polite" data-summary="data-summary" data-severity="info"> <div class="ui-messages-info ui-corner-all"> <a href="#" class="ui-messages-close" onclick="$(this).parent().slideUp();return false;"> <span class="ui-icon ui-icon-close" /> </a> <h:graphicImage id="image" library="assets" name="images/ajax-loader.gif"></h:graphicImage> <ul> <li> <span class="ui-messages-info-summary">Uploading Apk</span> </li> </ul> </div> </div> </p:outputPanel> --javascript function monitor(){ console.log("monitor called"); var loading = document.getElementById("uploadPForm:parentPanel"); loading.style.display = "block"; return false; }。

Answer 2

.blog-letter无需使用负余量。而是使用

.blog-piece-content{
     margin-left: 65px;
}

Answer 3

添加以下代码将解决该问题。

.blog-piece {
  margin-left: 55px;
}

Codepen Demo

CSS负边距有问题

3 个答案: