混淆CSS显示：表格和单元格的内容排列方式

我有一个web应用程序，并且正在使用CSS display：table。我有一个包装，它包含两列sbr和bdy。我没有问题让这看起来像一张桌子，但它似乎是一个表格单元的内容影响另一个。我为此做了一个小提琴。请注意，CCC没有出现在右侧单元格的顶部。 CCC的位置取决于左侧单元中的代码。混淆CSS显示：表格和单元格的内容排列方式

Fiddle example

谁能解释这是为什么。我会认为每个细胞都会与其他细胞分离。

<div id="wrp"> 
    <div id="row"> 
     <div id="sbr"> 
     <div class="sbr_bdy"> 
      <h4>AAAA</h4> 
     </div> 
     </div> 
     <div id="bdy">CCC</div> 
    </div> 
</div> 

#wrp { 
    background-color: #FFFFFF; 
    border-radius: 5px 5px 5px 5px; 
    display: table; 
    padding: 5px; 
    width: 200px; 
    margin: 0 auto; 
    position: relative; 
    text-align: left; 
    top: 110px; 
    z-index: 3; 
} 

.sbr_bdy { 
    padding: 20px 10px; 
    border: 1px solid #CDCDCD; 
    border-radius: 5px 5px 5px 5px; 
    background-color: red; 
} 

#row { display: table-row; } 
#sbr, 
#bdy { display: table-cell; border: 1px solid black;}

来源

2011-10-16 Samantha J T Star

#bdy { 
    vertical-align: top; 
}

这将移动CCC到小区的最顶端。现在你可以使用填充来获得一个小间距:) 当前的行为是顺便说一句表如何表现

来源

2011-10-16 09:53:45 TimWolla

感谢蒂姆（和其他人）。我只花了1个半小时就可以在2分钟内回答我的问题。你们都很棒。 –

没问题，那是我们的工作:) – TimWolla

混淆CSS显示：表格和单元格的内容排列方式

回答

相关问题