修复Octopress上的CSS。

Question

我跟着http://www.undefinednull.com/2013/10/15/octopress-blog-tweaks-adding-author-information-section-below-each-posts/，奇怪的部分是他的CSS代码工作，并漂浮在对齐图片旁边的文本。

虽然在我的情况，我得到这个，如下图所示：

正如你看到的，文本没有以适当的方式定向，原始的源代码似乎已经越积越多。我投入了大量的精力，并在Github上找到了他的CSS库，使用CSS编号为https://github.com/shidhincr/shidhincr.github.com/blob/source/sass/custom/_styles.scss的https://github.com/shidhincr/shidhincr.github.com/blob/source/source/_includes/custom/aboutauthor.html。

我得到了确切的布局的模仿版本，但不能因为它是如下图所示在这里举例缩进图片旁边的文字：

我已经尝试了所有的它，这里有一个完整的我在用的SCSS来源：

对于布局的.html

<div class="about"> 
    <span class="about-image"> 
      <img alt="shritam" src="/images/author.jpg"> 
    </span> 
    <span class="about-desc"> 
      <span style="float:right;"> 
       <em>Hello. Welcome to pwntoken. I am an Information Security Analyst cum Penetration Tester. I do Application Security and here's my <a target="_blank" href="https://www.linkedin.com/in/shritambhowmick"> LinkedIn </a> for a professional touch. Feel free to discuss about the post content and you can send me feedbacks, if any, at:</em> <a href="mailto:shritam.bhowmick@gmail.com" style="text-decoration:none;"> <img style="border:none" alt="shritam_email" src="/images/email.png"></a> 
      </span> 
      <br/> 
      <hr/> 
      <a href="https://twitter.com/pwntoken" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @pwntoken</a> 
    </span> 
</div> 

什么我使用的原始来源CSS这是Octopress用于处理所有的CSS内容的预处理：

// This File is imported last, and will override other styles in the cascade 
// Add styles here to make changes without digging in too much 
#content table:not(.highlight table) { 
    border: 1px solid #e7e3e7; 
    margin-bottom: 1.5em; // to match p style 
    th, td { 
    border: 1px dashed #e7e3e7; 
    padding: 0 5px; 
    } 
    th { 
    border-style: solid; 
    font-weight: bold; 
    background: url("/images/noise.png") repeat scroll left top #f7f3f7; 
    } 
    th[align="left"], td[align="left"] { 
    text-align: left; 
    } 
    th[align="right"], td[align="right"] { 
    text-align: right; 
    } 
    th[align="center"], td[align="center"] { 
    text-align: center; 
    } 
} 
body > footer { 
    @include shadow-box(none,0 15px 15px #333,0.3); 
    margin-bottom: 10px; 
} 
.about { 
    font-style: italic; 
    background-color: #FFF; 
    padding: 10px; 
    border: #e2edf2 2px dashed; 
    background-color: #f4f8fa; 
    overflow: hidden; 
    clear: both; 
    .about-image { 
     width: 150px; 
     float: left; 
     display: inline-flexbox; 
     margin-right: 20px; 
     img { 
      border-radius: 50%; 
     } 
    } 
    .about-desc > hr { 
     border: none; 
     border-top: 1px solid #fff; 
     padding-top: 10px; 
     box-shadow: 0 -1px 0 #CBCED1; 
    float: right; 
    } 
    #twitter-widget-1 { 
     float: right 
    } 
    &.sidebar { 
     border: none; 
     background-color: transparent; 
     box-shadow: none; 
     text-align: center; 
     .about-image,#twitter-widget-1 { 
      float: none; 
     } 
     .about-desc { 
      display: block; 
      a { 
       color: rgb(47, 99, 211); 
      } 
     } 
     .about-image { 
      img { 
       border-radius: 50%; 
       box-shadow: 0px 0px 0px 10px rgba(221, 214, 214, 0.2); 
       border: 10px solid rgba(151, 151, 151, 0.2); 
      } 
     } 
     @media only screen and (max-width: 768px) { 
      display: none; 
     } 
    } 
} 
.blog-index + aside.sidebar { 
    .about.sidebar { 
     @media only screen and (max-width: 768px) { 
      display: block; 
     } 
    } 
} 

li.related { 
    padding-bottom: 10px; 
    a { 
    color: #F55A0A; 
    font-size: 22px; 
    } 
    a:hover { 
    border-bottom: 2px dashed #F9A67B; 
    } 
} 

我不是一个CSS专家，我不知道应如何解决这个问题？

Answer 1

在

<span class="about-desc"> 
    <span style="float:right;"> 

删除内嵌样式style="float:right;"。