Question

我有一张带有两个Cols的桌子。在第一个Col中有文本（有时不止一行）。在右边（第二个Col）有一个价格。 Col的高度是我认为的价格的Lineheight。这就是为什么它没有效果：vertical-align：bottom;。

所以<TD>右边必须得到与左边相同的高度。我怎么能这样做？

我的css：

.col-1{
    width:363px !important;
    overflow:hidden !important;
    float:left !important;
    padding:0px 0px 0px 27px !important;
    margin:0 !important;
    white-space: nowrap;
    vertical-align:bottom !important;
}
.col-2{
    float:right !important;
    background-color:#FFF !important;
    width:100px !important;
    padding:0 !important;
    margin:0 !important;
    text-align:right;
    height:100% !important;
    vertical-align:bottom !important;
}

Answer 1

要实现您的外观，您应该使用或inline-block或table display。

Inline-block示例

.col-1{
    width:363px;
    padding:0px 0px 0px 27px;
    margin:0;
    white-space: nowrap;
    vertical-align:bottom;
}
.col-2{

    background-color:#FFF ;
    width:100px;
    padding:0 ;
    margin:0;
    text-align:right;
    vertical-align:bottom ;
}
div {
  border:solid;
  display: inline-block;
  }

<div class="col-1">
  <p>Pellentesque habitant morbi tristique senectus .</p>
</div><div class="col-2"v>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

或display:table;＆amp; display:table-cell;

.col-1{
        width:363px;
        padding:0px 0px 0px 27px;
        margin:0;
        white-space: nowrap;
        vertical-align:bottom;
    }
    .col-2{

        background-color:#FFF ;
        width:100px;
        padding:0 ;
        margin:0;
        text-align:right;
        vertical-align:bottom ;
    }
    div {
      border:solid;
      display: table;
    }
div>div {
  display:table-cell;
  }

<div>
  <div class="col-1"><p>Pellentesque habitant morbi tristique.</p>
  </div>
  <div class="col-2">
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
  </div>
</div>

Float不介意您的垂直对齐规则。

将底部的第二个col的文本对齐

1 个答案: