css display table 自适应高度、宽度问题

最新推荐文章于 2022-04-26 15:27:07 发布

原创最新推荐文章于 2022-04-26 15:27:07 发布 · 3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #javascript #css3 #vue #react

收录于

css 专栏收录该内容

7 篇文章

订阅专栏

本文探讨了如何使用CSS的display:table属性实现外层元素设定宽高，内部内容自适应的布局效果。当子元素为div时不等分宽度的问题，建议使用li标签来达到等分列的效果。

display: table; 外层定义宽高，里面内容自适应宽高。如果子元素是div，每列宽度不是等分。所以建议子元素用li 标签

在这里插入图片描述

.css-table {
      display: table;
      height: 2rem;
      width: 5rem;
  }
  .css-table-bg {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      background-color: coral;
  }
  .css-table li {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      background-color:darkkhaki;
  }

    <div class="css-table">
    	<div class="css-table-bg">1</div>
        <div class="css-table-bg">2</div>
        <div class="css-table-bg">3</div>
    </div>
    <div class="css-table">
        <ul> 
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Clients</a></li>
        </ul>
    </div>