[WordPress] 下部に 2 番目の列のテキストを整列します。

スポンサーリンク

質問

2 つの列を持つテーブルをあります。最初の列のテキスト (時々 より多くし、1 行) があります。right(second Col) では、価格です。コルの高さは、私が思う価格から Lineheight です。Thats なぜそれを持っている影響を与えません: 垂直位置揃え: 底;.

右同じ高さを取得する必要があるので、左に。どのようにこれを行うことができますか?

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

の答え

見れば何を達成するために使用してくださいまたは

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;

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

は気にしない vertical-align ルール

http://stackoverflow.com/questions/28984499/align-text-of-second-col-at-bottom

スポンサーリンク

Leave a Reply