希望通过“display：table-cell;”和填充指导

Question

我希望第二列中的内容的上方有10px的空间。但是当我添加“padding-top：10px”时两列的内容都下降了10px。任何人都可以提出解决方案

CSS：

#div1 { display: table;} 
#div1-1 { display: table-cell; 
    width: 200px; 
    border: 1px solid #aaa; 
} 
#div1-2 { display: table-cell; 
    width: 200px; 
    border: 1px solid #aaa; 
    padding-top: 10px; 
} 

HTML：

<div id="div1"> 
<div id="div1-1">Apples</div> 
<div id="div1-2">Oranges</div> 
</div> 

Answer 1

如果添加浮动：左;到＃div1-1，第一列将保持原样。

Answer 2

我的解决办法是尽量在每个单元

#myDiv { 
 
    display: table; 
 
} 
 
#div1 { display: table-row;} 
 
#div1-1{ 
 
    display: table-cell; 
 
    width: 200px; 
 
    border: 1px solid #aaa; 
 
} 
 
#div1-2 { 
 
    display: table-cell; 
 
    width: 200px; 
 
    border: 1px solid #aaa; 
 
} 
 
.space{ 
 
    height:10px; 
 
    width:100%; 
 
    display:block; 
 
} 
 
.content{ 
 
    width:100%; 
 
}

<div id="myDiv"> 
 
<div id="div1"> 
 
    <div id="div1-1"> 
 
     <div class="content">Apples</div> 
 
     <div class="space">&nbsp;</div> 
 
    </div> 
 
    <div id="div1-2"> 
 
     <div class="space">&nbsp;</div> 
 
     <div class="content">Oranges</div> 
 
    </div> 
 
</div> 
 
</div>