對CSS vertical-align的一些理解與認識

zyxn666發表於2018-01-22
CSS

不多說，直接上效果圖：

對CSS vertical-align的一些理解與認識

說下需求：要求右邊的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>
複製程式碼

參考： 張鑫旭文章

www.zhangxinxu.com/wordpress/2…


相關文章