对CSS vertical-align的一些理解与认识

最新推荐文章于 2022-12-17 14:54:07 发布

weixin_33805743

最新推荐文章于 2022-12-17 14:54:07 发布

阅读量60

点赞数

文章标签： php

原文链接：https://juejin.im/post/5a62d2f76fb9a01c95262d8f

版权

不多说，直接上效果图：

说下需求：要求右边的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…

转载于:https://juejin.im/post/5a62d2f76fb9a01c95262d8f