对CSS vertical-align的一些理解与认识说下需求：要求右边的3个详细条目与左侧的“优惠信息：”这四个字顶部

不多说，直接上效果图：

说下需求：要求右边的3个详细条目与左侧的“优惠信息：”这四个字顶部对齐。

用到的知识就是vertical-align: text-top。

代码如下：

<html>
<head>
  <title>css样式demo</title>
  <style type="text/css">
    .out{
      font-size: 16px;
      line-height: 40px;
      color: #ccc;
    }
    .right{
      display: inline-block;
      color: #333;
      width: 48%;
      background-color: pink;
      vertical-align: text-top;
    }
  
  </style>
</head>
<body>
  <div class="out">
    优惠信息：
    <div class="right">
      <div class="item">NO1</div>
      <div class="item">NO2</div>
      <div class="item">NO3</div>
    </div>  
  </div>
</body>
</html>

参考：张鑫旭文章