Html 如何制作浮底？

演示如下：

我的代码如下：

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

我想在最底层显示课堂价格。实际上它可以使用边距，但问题是类描述，类描述是动态的

如何使课堂价格最低

谢谢你

首先，请不要在不使用表格数据时使用

也就是说，您可以在.description中添加填充底部，并将.price设置为position:absolute；然后将其放置在左下角。填充底部是价格的输入空间，因此根据您的需要进行调整。请参见下面的示例

桌子{ 位置：相对位置； } .说明{ 垫底：20px； } .价格{ 位置：绝对位置； 底部：0； 左：0； } -> -> 娜娜酒店 娜娜酒店是最好的。娜娜酒店是最好的。娜娜酒店是最好的。Lorem ipsum dolor sit amet，奉献精英。但事实上，这是一种严重的罪过，是一种不公平的行为 波罗·梅奥里斯！我的天哪！ 价格：123/晚 细节 更多 编辑

这里有一个更好的解决方案，不使用表。查看下面的代码，并根据您的需要使用它。显示器：flex；是将您的“设计”轻松转化为您所需的方式

请考虑将来你需要做你自己的工作。我们的员工还没有准备好做你想做的事

.说明{ 垫底：20px； } .集装箱{ 宽度：650px； 边框：2件纯黑； 显示器：flex； 柔性流：行换行； } .形象{ 宽度：200px； 弹性基准：200px； } .图像img{ 宽度：200px； } .内容{ 弹性基准：calc100%-200px； 左侧填充：10px； 框大小：边框框； } .info容器{ 显示器：flex； 柔性流：行换行； 调整内容：灵活启动； } .价格{ 颜色：c80000； 字体大小：16px； } .按钮{ 左边距：自动； } 娜娜酒店 娜娜酒店是最好的。娜娜酒店是最好的。娜娜酒店是最好的。 价格：123/晚 细节 更多

---

像这样的？试试看：我想要这样的结果：