換行時，線元素被下推

Question

我如何解決在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>

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

在這里，我做了一些更改。

首先，我只使用:: before偽元素，而不是使用不同的div和span。 該元素使用CSS計數器，並且位於絕對位置。 而且，行高現在為2em，因此它填充了圓的高度，並且或多或少地使文本居中。 我已經更改了頭部輪廓的一些細節，因此多線頭部的線條彼此正確對齊。

HTML現在看起來像這樣，沒有數字的附加標記。

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

和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需要相對位置，否則圓將不會停留在其附近：

h3 {
    position: relative;
}

我已經將整個內容包裝在一篇文章中，但是您也可以使用div或僅使用正文。 div的邊距現在是文章的空白，因此標題和文本的縮進量相同（盡管頭部有自己的縮進，相對於該縮進）。

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> 

參考

• 更新的小提琴： http : //jsfiddle.net/GolezTrol/7bzc74qy/36/
• 廣泛支持這種樣式的CSS計數器： http : //caniuse.com/#feat=css-counters
• 有關它們的更多信息： http : //css-tricks.com/numbering-in-style/