CSS diaplay=“grid“未生效与display:block

最新推荐文章于 2023-06-17 19:21:06 发布

Nie2014

最新推荐文章于 2023-06-17 19:21:06 发布

阅读量1.6k

点赞数 1

分类专栏： vue 文章标签： css web

本文链接：https://blog.csdn.net/Nie2014/article/details/118680575

版权

本文探讨了在CSS布局中遇到的display:grid未生效的问题。原有代码使用display:block和display:none控制界面显示，导致视频分屏显示时界面异常。通过使用v-if指令替换显示控制，并应用CSS Grid，成功解决了尺寸变化和界面布局不灵活的问题。

摘要由CSDN通过智能技术生成

1、CSS grid可以通过嵌套生成更灵活的页面布局。
参考博客值得收藏的css grid构建复杂布局的小技巧！中代码示例

<p class="container">
  <p class="item">One</p>
  <p class="item">Two</p>
  <p class="item">Three</p>
  <p class="item inner-grid">
    <p class="item">i</p>
    <p class="item">ii</p>
    <p class="item">iii</p>
    <p class="item">iv</p>
    <p class="item">v</p>
    <p class="item">vi</p>
  </p>
  <p class="item">Five</p>
  <p class="item">Six</p>
</p>

.container {
   
  display: grid;
  height: 100vh;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, auto))
}
.inner-grid {
   
  display: grid;
  background: white;
  height: 100%;
  grid-gap: 5px;
  grid-template-columns: repeat(3, auto);
}

在这里插入图片描述 2、CSS diaplay="grid"未生效
需要实现视频分屏显示，但是之前同事写的代码里使用了diaplay:block和display:none这样的方法控制界面显示。当我开始添加display:grid的内容，则界面无任何变化。而且点击不同分屏按钮，视频播放器的div尺寸忽大忽小，查看浏览器的调试界面：

 <el-main>
      <el-row>
        <el-col :span="20">
          <div class="video-show1" id="div1">
            <div class="window1" alt="1"></div>
          </div>
          <div class="video-show4" id="div4" style="display: none">
            <div class="window4" alt="1"></div>
            <div class="window4" alt="2"></div>
            <div class="window4" alt="3"></div>
            <div class="window4" alt="4"></div>
          </div>
          <div class="video-show9" id="div9" style="display: none">
            <div class="window9" alt="1"></div>
            <div class="window9" alt="2"></div>
            <div class="window9" alt="3"></div>
            <div class="window9" alt="4"></div>
            <div class="window9" alt="5"></div>
            <div class="window9" alt="6"></div