Question

当h3线很长时，如何解决没有线＃2被推下来的问题。

当标题很短时，数字和文字很好地对齐，但是当标题包含在两行上时，整个部分都会被推下来。

这是我的傻瓜： 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

我的尝试，我做了一些改变。

首先，我没有使用不同的div和span，而是只使用了:: before伪元素。此元素使用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;
}

＆＃13;

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

＆＃13;

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

＆＃13;

<强>参考

更新了小提琴：http://jsfiddle.net/GolezTrol/7bzc74qy/36/
广泛支持此风格的CSS计数器：http://caniuse.com/#feat=css-counters
有关他们的更多信息：http://css-tricks.com/numbering-in-style/

包装文本时，线元素会被按下

2 个答案: