小编Tob*_*oby的帖子

空 DIV 会将其旁边的表格单元格中的内容下推

使用 display:table,table-row,table-cell 时出现一些奇怪的 CSS 行为

当表格单元格包含空 div 时,它会将其旁边的单元格的内容下推。

<html>
  <body>

    <div style="height:200px">
      <div style="display:table">
        <div style="display:table-row">
          <div style="display:table-cell">
            <div style="height:100px;width:200px;overflow-y:scroll"></div>
          </div>
          <div style="display:table-cell">
            <div style="height:100px;width:100px;overflow-y:scroll">Why am I getting pushed down?!?</div>  
          </div>
        </div>
     </div>
   </div>

   <div style="height:200px">
      <div style="display:table">
        <div style="display:table-row">
          <div style="display:table-cell">
            <div style="height:100px;width:200px;overflow-y:scroll">A</div>
          </div>
          <div style="display:table-cell">
            <div style="height:100px;width:100px;overflow-y:scroll">Suddenly I'm not getting pushed down?!?</div>  
          </div>
        </div>
      </div>
    </div>

  </body>
</html>
Run Code Online (Sandbox Code Playgroud)

如果我在 DIV 中放入一些内容,行为就会停止。这是一个错误吗?影响 Firefox 和 Chrome。如果这不是一个错误,我该如何解决它?

html css

1
推荐指数
1
解决办法
1259
查看次数

标签 统计

css ×1

html ×1