tabe-cell实现两栏等高效果

最新推荐文章于 2021-06-15 20:40:10 发布

原创最新推荐文章于 2021-06-15 20:40:10 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用CSS的table-cell属性来实现两栏等高的布局技巧，这种方法可以确保不同内容长度的栏目高度保持一致，适用于多种网页设计场景。

tabe-cell实现两栏等高效果

<div id = "container" style = "display:table;width:100%">
 <div id = "left" style = "display: table-cell;background-color: green;">
          内容<br/>
          内容<br/>
          内容<br/>
  </div>
  <div style = "display: table-cell"></div>
  div id = "right" style = "display: table-cell;background-color: skyblue;">
        内容<br/>
        内容<br/>
        内容<br/>
        内容<br/>
        内容<br/>
        内容<br/>
        内容<br/>
        内容<br/>
  </div>
  </div>