フロートボトムを作る方法は？

Question

デモは、このようなものです：https://jsfiddle.net/oscar11/9syLgw9m/3/

私のコードは次のようである：

<table border="2" width="650px"> 
    <tr> 
     <td> 
      <div style="float:left"> 
       <!-- <p style="text-align:center;"> --> 
        <img style="width:200px; height:140px; margin:9px;" src="http://img.thesun.co.uk/aidemitlum/archive/02388/Chelsea_Small_2388014a-660.png" /> 
       <!-- </p> --> 
      </div> 
      <div style="float:left"> 
       <div class="hotel">Nana hotel</div> 
       <div class="description">Nana hotel is the best.Nana hotel is the best.Nana hotel is the best.</div> 
       <div class="price" style=""> 
        <div style="float:left;color:#c80000;font-size:16px;">Price : <b>123</b>/night</div> 
        <div style="float:right;"><button type="button" class="btn blue more">Detail</button>&nbsp;&nbsp;<button type="button" class="btn blue more">More</button></div> 
       </div> 
      </div> 
     </td> 
    </tr> 
</table> 

私は一番下にクラス「価格」を示したいと思います。実際にそれは余白を使用することができますが、問題はクラスの説明です、クラスの説明は動的です

最下位クラスの価格を作る方法は？あなたは表形式のデータを使用していないとき

は

Answer 1

まずありがとう、<table>を使用しないでください。

つまり、.descriptionにpadding-bottomを追加し、.priceをposition: absolute;に設定して、左下隅に配置することができます。 padding-bottomは価格が入るスペースなので、あなたのニーズに合わせて遊びましょう。下の私の例を見てください。

table { 
    position: relative; 
} 
.description { 
    padding-bottom: 20px; 
} 
.price { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 

<table border="2" width="650px"> 
    <tr> 
    <td> 
     <div style="float:left"> 
     <!-- <p style="text-align:center;"> --> 
     <img style="width:200px; height:140px; margin:9px;" src="http://img.thesun.co.uk/aidemitlum/archive/02388/Chelsea_Small_2388014a-660.png" /> 
     <!-- </p> --> 
     </div> 
     <div style="float:left"> 
     <div class="hotel">Nana hotel</div> 
     <div class="description">Nana hotel is the best.Nana hotel is the best.Nana hotel is the best. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt, modi ipsum natus provident molestias magni culpa ab cumque, quo, deleniti fugiat adipisci sequi suscipit 
      porro maiores! Quod quibusdam modi consectetur!</div> 
     <div class="price" style=""> 
      <div style="float:left;color:#c80000;font-size:16px;">Price : <b>123</b>/night</div> 
      <div style="float:right;"> 
      <button type="button" class="btn blue more">Detail</button>&nbsp;&nbsp; 
      <button type="button" class="btn blue more">More</button> 
      </div> 
     </div> 
     </div> 
    </td> 
    </tr> 
</table> 

編集

は、ここでテーブルを使用せずに、より優れたソリューションです。下記のコードをチェックし、必要に応じて遊んでください。 display: flex;は、あなたが望むものにあなたの「デザイン」を簡単に変える方法です。

今後、自分で作業する必要があることをご考慮ください。私たちはあなたが欲しいものを何でもする準備ができているわけではありません。

.description { 
 
    padding-bottom: 20px; 
 
} 
 
.container { 
 
    width: 650px; 
 
    border: 2px solid black; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 
.image { 
 
    width: 200px; 
 
    flex-basis: 200px; 
 
} 
 
.image img { 
 
    width: 200px; 
 
} 
 
.content { 
 
    flex-basis: calc(100% - 200px); 
 
    padding-left: 10px; 
 
    box-sizing: border-box; 
 
} 
 
.info-container { 
 
    display: flex; 
 
    flex-flow: row-wrap; 
 
    justify-content: flex-start; 
 
} 
 
.price { 
 
    color: #c80000; 
 
    font-size: 16px; 
 
} 
 
.buttons { 
 
    margin-left: auto; 
 
}

<div class="container"> 
 
    <div class="image"> 
 
    <img src="http://img.thesun.co.uk/aidemitlum/archive/02388/Chelsea_Small_2388014a-660.png" alt="Chelsea" /> 
 
    </div> 
 
    <div class="content"> 
 
    <div class="title">Nana hotel</div> 
 
    <div class="description">Nana hotel is the best.Nana hotel is the best.Nana hotel is the best.</div> 
 
    <div class="info-container"> 
 
     <div class="price">Price : <strong>123</strong>/night</div> 
 
     <div class="buttons"> 
 
     <button type="button" class="btn blue more">Detail</button>&nbsp;&nbsp; 
 
     <button type="button" class="btn blue more">More</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>