Question

我得到了以下设置：

<div class="table">
    <div class="cell">Cell 1 [fixed width]</div>
    <div class="cell">Cell 2</div>
    <div class="cell">Cell 3 [fixed width]</div>
</div>

用这个css：

.table {
     display: table-cell;
     width: 100%;
}
.cell {
     display: table-cell;
     vertical-align: middle;
}

现在我希望在 Cell 3 中有一些文字。一些文本应位于单元格的底部。使用 vertical-align 我可以很容易地做到这一点，但我得到另一条线应该留在单元格的中间或顶部。我怎样才能做到这一点？我尝试了一些高度设置，但这些对细胞没有影响。并且线高不会起作用，因为高度不固定。

Answer 1

查看以下答案： Fiddle

<div class="table">
    <div class="cell1">Cell 1 [fixed width]</div>

    <div class="cell2">Cell 2</div>

    <div class="cell3">Cell 3 [fixed width] <div class="bot_txt">bottom text</div></div>
</div>


.table {
     display: table;
     width: 100%;
}
.cell1 {
     display: table-cell;
     vertical-align: middle;
     width: 33%;
    height:200px;
    background-color:red;
}
.cell2 {
     display: table-cell;
     vertical-align: middle;
     width: 33%;
    height:200px;
    background-color:green;
}
.cell3 {
    background-color:yellow;
     display: table-cell;
     vertical-align: top;
     width: 33%;
    height:200px;
    position:relative;
}
.bot_txt {
    position:absolute;
    bottom:0px;
}

Answer 2

这是你在找什么？

＆＃13;

.table {
  display: table;
  width: 100%;
  border: 2px solid red;
}
.cell {
  display: table-cell;
  height: auto;
  vertical-align: middle;
  text-align: center;
  border: 1px solid black;
}

＆＃13;

<div class="table">
  <div class="cell">Cell 1 [fixed width]</div>
  <div class="cell">Cell 2</div>
  <div class="cell">Cell 3 [fixed width]
    <br>additional line</div>
</div>

＆＃13;

顶部和底部的表格单元格中的文本

2 个答案: