如何使浮动底部？

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>。

也就是说，您可以将padding-bottom添加到.description并将.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;是改变你的设计的方法。很容易达到你想要的。

请考虑将来你需要做自己的工作。我们的员工不准备做任何你想做的事。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;