解决子元素撑不开父元素

最新推荐文章于 2024-07-24 11:16:38 发布

Caomeiguoguo

最新推荐文章于 2024-07-24 11:16:38 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/caomeiguoguo/article/details/108461156

版权

最近我正在做一个项目,做一个表格,遇到了一个问题，在我的谷歌上样式可以正常展示,在需求方的谷歌上样式挤压在了一起，我研究发现原来我的谷歌版本是83，而需求方的谷歌版本是65，这时候我才知道，所以我下载了65版本的谷歌，用于适配。

<body>
  <div class="container">
    <div class="container_thead">
    </div>
    <div class="container_tbody">
      <div class="container_hotel">
        <div class="container_tbody_con" v-for="(item,index) in tableDate" :key="index"> 
        </div>
      </div>
    </div>
  </div>
</body>

<style>
  .container{
    width:100%;
    height:600px0;
    display:flex;
    flex-direction:column;
  }
  .container_thead{
    width:100%;
    height:100px;
    display:flex;
  }
  .container_tbody{
    width:100%;
    height:500px;
    display:flex;
    flex-direction:column;
  }
  .container_hotel:after{
    width:100%;
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
  }
  .container_tbody_con{
    width:100%;
    height:50px;
    display:flex;
    border-bottom:1px solid #ccc;
  }
  
</style>

通过上述就可以解决父元素塌陷问题