html - 如何制作浮底？

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>

我想在最底部显示类“价格”。其实可以用margin，但是问题是类描述，类描述是动态的

如何让类在最底层“定价”？

谢谢

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;是将您的“设计”轻松变成您想要的东西的方法。

请考虑将来您需要做自己的工作。我们的员工并没有准备好为所欲为。

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