分度表顯示：對準問題

Question

我有以下代碼：

div { 
 
     box-sizing: border-box; 
 
     border-style: solid; 
 
} 
 
div.table { 
 
     display: table; 
 
} 
 
div.row { 
 
     display: table-row; 
 
} 
 
div.cell { 
 
     display: table-cell; 
 
} 
 
div.logo { 
 
     width: 200px; 
 
     height: 200px; 
 
     border-color: red; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
     <div class="cell"> 
 
      <div class="logo"></div> 
 
     </div> 
 
     <div class="cell"> 
 
      Content 
 
     </div> 
 
    </div> 
 
</div>

第二小區的內容中的第一個對齊到div的底部，並出現在它的細胞的最底部。當兩個單元格都填充了文本時，兩個浮動內容都位於頂部。

如何獲得第二個單元格的內容定位在單元格的頂部？

這個問題一定很愚蠢，但我是一個絕對的初學者在CSS中，只是不知道如何解決這個問題。

Answer 1

使用vertical-align:top來垂直對齊表格單元格。
div s通常在其默認樣式表定義中有vertical-align:baseline，這解釋了您所看到的顯示。請注意，實際表格單元格（td和th元素）默認爲vertical-align:middle。

div { 
 
     box-sizing: border-box; 
 
     border-style: solid; 
 
} 
 
div.table { 
 
     display: table; 
 
} 
 
div.row { 
 
     display: table-row; 
 
} 
 
div.cell { 
 
     display: table-cell; 
 
     vertical-align:top; 
 
} 
 
div.logo { 
 
     width: 200px; 
 
     height: 200px; 
 
     border-color: red; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
     <div class="cell"> 
 
      <div class="logo"></div> 
 
     </div> 
 
     <div class="cell"> 
 
      Content 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

你的意思呢？ 添加vertical-align:top到div.cell

div { 
 
     box-sizing: border-box; 
 
     border-style: solid; 
 
} 
 
div.table { 
 
     display: table; 
 
} 
 
div.row { 
 
     display: table-row; 
 
} 
 
div.cell { 
 
     display: table-cell; 
 
     vertical-align:top; 
 
} 
 
div.logo { 
 
     width: 200px; 
 
     height: 200px; 
 
     border-color: red; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
     <div class="cell"> 
 
      <div class="logo"></div> 
 
     </div> 
 
     <div class="cell"> 
 
      Content 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

添加vertical-align屬性

div { 
 
    box-sizing: border-box; 
 
    border-style: solid; 
 
} 
 
div.table { 
 
    display: table; 
 
} 
 
div.row { 
 
    display: table-row; 
 
} 
 
div.cell { 
 
    display: table-cell; 
 
    vertical-align: top; 
 
} 
 
div.logo { 
 
    width: 200px; 
 
    height: 200px; 
 
    border-color: red; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
    <div class="cell"> 
 
     <div class="logo"></div> 
 
    </div> 
 
    <div class="cell"> 
 
     Content 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

使用vertical-align: top在你的CSS。

div.cell { 
    display: table-cell; 
    vertical-align: top; 
} 

Answer 5

下面應該就好了工作：

div { 
 
     box-sizing: border-box; 
 
     border-style: solid; 
 
} 
 
div.table { 
 
     display: inline-block; /*changed this line*/ 
 
} 
 
div.row { 
 
     display: flex;   /*changed this line*/ 
 
} 
 
div.cell { 
 
     /* removed styles */ 
 
} 
 
div.logo { 
 
     width: 200px; 
 
     height: 200px; 
 
     border-color: red; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
     <div class="cell"> 
 
      <div class="logo"></div> 
 
     </div> 
 
     <div class="cell"> 
 
      Content 
 
     </div> 
 
    </div> 
 
</div>