html - 垂直定位一个高度小于其内联 div 的 div

Question

我有一个<div> <div> 旁边指定的高度高度可变，具体取决于其中文本的数量。我已经成功地将它们放在一起，而没有最右边的 <div>的文本环绕在左侧 <div> ，但我不知道如何左边<div>与右侧的顶部/开始对齐 <div>

我拥有的:

我想要什么

HTML

<div class='success'>
              <span class='introduction'><h4>Some instructions:</h4></span>
                  <div class='success-instruction'>
                    <div class='circledNumber'>1</div>
                    <div class='success-details'>
                      <h4>Do stuff:</h4>
                      Assign devlepment devices, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                  </div>
                  <div class='success-instruction'>
                    <div class='circledNumber'>2</div>
                    <div class='success-details'>
                      <h4>Set up Things:</h4>
                      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                    </div>
                  </div>
                  <div class='success-instruction'>
                    <div class='circledNumber'>3</div>
                    <div class='success-details'>
                      <h4>Be a hero: </h4>
                      Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. 
                    </div>
                  </div>
</div>

CSS

.success { 
 display: block;
}
.success .introduction{
  margin-bottom: 10px;
  margin-top: 10px;
  display: block;
}

.success  .success-instruction {
  margin-bottom: 5px;
  white-space: nowrap;
}
.success  .circledNumber {
  display: inline-block;
  background-color: orange;
  color: white;
  margin-right: 12px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  text-align: center;

}

.success .success-details{
  display: inline-block;
  white-space: normal;
}

.success h4{
  display: inline;
  font-size: inherit;
}

JSFiddle
https://jsfiddle.net/3wbcunm7/1/

Answer 1

在这种情况下，您只需在图标上使用 vertical-align: top; 即可。 JSFiddle .