css - 修复 Octopress 上的 CSS。

Question

我关注了 http://www.undefinednull.com/2013/10/15/octopress-blog-tweaks-adding-author-information-section-below-each-posts/ 并且很奇怪部分是他的 CSS 代码可以工作并 float 对齐图片旁边的文本。

在我的例子中，我得到如下所示:

如您所见，文本的方向不正确，因为原始源代码似乎堆积如山。我投入了大量资金并在 Github 上看到了他的 CSS 存储库，它是 https://github.com/shidhincr/shidhincr.github.com/blob/source/source/_includes/custom/aboutauthor。 html 使用 https://github.com/shidhincr/shidhincr.github.com/blob/source/sass/custom/_styles.scss 中的 CSS。

我得到了精确布局的模仿版本，但无法缩进图像旁边的文本，如下所示:

我已经尝试了所有这些，这是我正在使用的完整 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 _styles.scss 这是 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;"。