html - 换行时，线元素被下推

我如何解决在h3行很长的情况下没有将＃2行压低的问题。

当标题较短时，数字和文本会很好地对齐，但是当标题环绕在两行上时，整个部分都将向下推。

这是我的jsfiddle：
    http://jsfiddle.net/7bzc74qy/29/

这是我的代码：

    <div class="alignright">
    <p>
        <img alt="Sign up Today" height="259" src="" width="300" /></p>
</div>
<div class="circle">
    <span class="number">1</span>
        </div>
            <h3>
                Banana</h3>
            <p>
                A banana is an edible fruit, botanically a berry, produced by several kinds
                of large herbaceous flowering plants in the genus Musa.</p>
            <p>&nbsp;</p>
<div class="circle">
    <span class="number">2</span>
</div>
    <h3>
        Orange is the colour of saffron, pumpkins and apricots.</h3>
    <p>
        Mobile phones, mobile broadband and home broadband in the Orange Shop. Plus the latest
        news, entertainment, sport and lifestyle content from Orange.</p>
    <p>&nbsp;</p>
  <div class="circle">
      <span class="number">3</span>
  </div>
      <h3>
          Watermelon</h3>
       <p>
           We here at the National Watermelon Promotion Board have one goal: to increase
           consumer demand for fresh watermelon through promotion, research</p>

最佳答案

/* Circle Numbers */
  .circle {
    border-radius: 100%;
    height: 2em;
    width: 2em;
    text-align: center;
    background: #f66511;
    float: left;
}

.circle .number {
    margin-top: 0.10em;
    font-size: 1.5em;
    font-weight: bold;
    font-family: sans-serif;
    line-height: 1.4em;
    color: #ffffff;
}

h1.section-title {
    font-family: SegoeRegular,Helvetica,Arial;
    font-size: 32px;
    font-weight: normal;
    color: #2251a4;
    text-transform: uppercase;
    margin: 10px 0 50px 0;
    border-bottom: 1px dotted #f66511;
    padding: 0 0 5px 0;
    line-height: 38px;
}

h3 {
    font-family:Arial,Helvetica,sans-serif;
    font-size:18px;
    color:#232323;
    margin:0 0 5px 48px;
    text-align:left;
    font-weight:bold;
}

p {
    font-family:Arial,Helvetica,sans-serif;
    font-size:16px;
    color:#616161;
    margin:0 0 0 49px;
    text-align:left;
    font-weight:normal;
    line-height: 24px;
}
.circle + h3,
.circle {
    vertical-align: top;
}
.circle + h3 {
    line-height: 30px;
}

.alignright {
    float: right;
    margin: 0px 0px 20px 30px;
}

关于html - 换行时，线元素被下推，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27572701/