换行时，线元素被下推

Question

How do I fix not having line #2 get pushed down when the h3 line is long.

The numbers and text line up nicely when the titles are short, but when the title wraps onto two lines, the entire section gets pushed down.

Here's my jsfiddle: http://jsfiddle.net/7bzc74qy/29/

Here's my code:

    <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>

Answer 1

/* 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;
}

Answer 2

Here my attempt, I've made a couple of changes.

First, instead of using a different div and span, I've used only the ::before pseudo-element. This element uses a CSS counter, and is positioned absolutely. Also, the line-height is now 2em, so it fills the height of the circle, and more or less centers the text. I've changed some details in the outline of the head, so the lines of a multi-line head are aligned properly underneath each other.

Html now simply looks like this, without additional markup for the numbers.

<h3>Heading 1</h3>
<p>Paragraph1</p>
<h3>Heading 2</h3>
<p>Paragraph2</p>
<h3>Heading 3</h3>
<p>Paragraph3</p>

And the CSS:

/* Circle Numbers */  
h3::before {
    display: block;
    content: counter(head-counter);
    counter-increment: head-counter;
    position: absolute;
    left: -49px;
    top: -0.5em;
    ...
    line-height: 2em;
}

H3 needs position relative, otherwise the circle won't stay near it:

h3 {
    position: relative;
}

I've wrapped the whole thing in an article, but you could use a div as well, or just the body. The margin of the div is now the padding of the article, so the header and the text are indented by the same amount (although the heads have their own indenting, which is relative to this one).

article {
    counter-reset: head-counter;
    padding-left: 49px;
}

 /* Circle Numbers */ h3::before { display: block; content: counter(head-counter); counter-increment: head-counter; position: absolute; left: -49px; top: -0.3em; border-radius: 100%; height: 1.4em; width: 1.4em; text-align: center; background: #f66511; 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 { position: relative; font-family:Arial,Helvetica,sans-serif; font-size:18px; color:#232323; padding:0 0 5px 0; text-align:left; font-weight:bold; } article { counter-reset: head-counter; padding-left: 49px; } p { font-family:Arial,Helvetica,sans-serif; font-size:16px; color:#616161; text-align:left; font-weight:normal; line-height: 24px; } .alignright { float: right; margin: 0px 0px 20px 30px; } 

 <div class="alignright"> <p><img alt="Sign up Today" height="259" src="" width="300" /></p> </div> <article> <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> <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> <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> </article> 

References

• Updated fiddle: http://jsfiddle.net/GolezTrol/7bzc74qy/36/
• CSS counters in this style are widely supported: http://caniuse.com/#feat=css-counters
• For more information about them: http://css-tricks.com/numbering-in-style/