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通常在其默认样式表定义中有vertical-align:baseline，这解释了您看到的显示。请注意，实际的表格单元格（td和th元素）默认为vertical-align:middle。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

你是说这个意思吗？将vertical-align:top添加到div.cell

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

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

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>

带表格显示的div：对齐问题

5 个答案: