Html 3个框内联，内容对齐

我有3个动态内容框，每个框中都有一个带有提交按钮的表单，以及其他一些东西。如何从图片中获得效果

每个盒子的高度是所有盒子的最大高度。在底部的一行中提交按钮

身体{ 宽度：720px； } 表单输入{ 显示：块； 边缘底部：15px； 宽度：100%； } 表格标签{ 文本对齐：左对齐； 宽度：100%； 显示：块； } .盒式集装箱{ 显示器：flex； } .盒子{ 边框：1px000； flex:1自动； 最大宽度：calc33%-2px； 文本对齐：居中； 框大小：边框框； 填充：10px； } .方框p{ 文本对齐：对齐； } 呜呜呜呜 一些信息dasd asd asd asdasdasfs dsgd dfg sdfg fsdg sdfg s

值1 价值2 布拉布拉布拉达达斯达斯德酒店 更多信息一些信息数据asd asd asd asd an

值1 价值2 价值3 布拉布拉b 详细信息

值1

---

我白手起家地写了一些东西给你作为基础

HTML

最后，它看起来像这样。我添加了.clearfix，以防在它之后添加更多内容

玩玩它。希望这能帮到你

另外，如果您不喜欢使用绝对位置的想法。我这样做只是为了演示它的外观，没有按钮上方的虚拟内容

---

另一种方法是为每个矩形节点创建包装器。在包装器内部，声明两个相互重叠的div。底部的div应该包含提交按钮。

确定。谢谢大家的回答。我解决了我的问题

表单输入{ 显示：块； 边缘底部：15px； 宽度：100%； } 表格标签{ 文本对齐：左对齐； 宽度：100%； 显示：块； } .盒式集装箱{ 显示器：flex； } .盒子{ 边框：1px000； 弹性：1； 文本对齐：居中； 框大小：边框框； 填充：10px； } .盒式表格{ 显示器：flex； 弯曲方向：立柱； 证明内容：之间的空间； 身高：100%； } .方框p{ 文本对齐：对齐； } 呜呜呜呜 一些信息dasd asd asd asdasdasfs dsgd dfg sdfg fsdg sdfg s

值1 价值2 布拉布拉布拉达达斯达斯德酒店 更多信息一些信息数据asd asd asd asd an

值1 价值2 价值3 布拉布拉b 详细信息

值1

---

我希望这就是你需要的。我已将flex属性添加到表单中，以占用所有可用空间

身体{ 宽度：720px； } 形式{ 弹性：10自动； 位置：相对位置； 填充底部：30px； } 表单输入{ 显示：块； 边缘底部：15px； 宽度：100%； } 表格标签{ 文本对齐：左对齐； 宽度：100%； 显示：块； } 窗体按钮{ 显示：块； 宽度：100%； 位置：绝对位置； 底部：10px； } .盒式集装箱{ 显示器：flex； } .盒子{ 边框：1px000； flex:1自动； 最大宽度：calc33%-2px； 文本对齐：居中； 框大小：边框框； 填充：10px； 显示器：flex； 弯曲方向：立柱； } .方框p{ 文本对齐：对齐； } 呜呜呜呜 一些信息dasd asd asd asdasdasfs dsgd dfg sdfg fsdg sdfg s

值1 价值2 提交 布拉布拉布拉达达斯达斯德酒店 更多信息一些信息数据asd asd asd asd an

值1 价值2 价值3 提交 布拉布拉b 详细信息

值1 提交 增加伸缩方向：列；到标题、内容和形式，并将内容放在justify-content:flex-end-to-form，它将解决这个问题

.box h1,
.box p,
.box form {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.box form {
    justify-content: flex-end;
}

表单输入{ 显示：块； 边缘底部：15px； 宽度：100%； } 表格标签{ 文本对齐：左对齐； 宽度：100%； 显示：块； } .盒式集装箱{ 显示器：flex； } .盒子{ 边框：1px000； flex:1自动； 最大宽度：calc33%-2px； 文本对齐：居中； 框大小：边框框； 填充：10px； 显示器：flex； 柔性包装：包装； } .方框p{ 文本对齐：对齐； } .框h1， .方框p， .盒式表格{ 显示器：flex； 弯曲方向：立柱； 宽度：100%； } .盒式表格{ 证明内容：柔性端； } 呜呜呜呜 一些信息dasd asd asd asdasdasfs dsgd dfg sdfg fsdg sdfg s

值1 价值2 布拉布拉布拉达达斯达斯德酒店 详细信息 一些信息dasd asd asd asd an

值1 价值2 价值3 布拉布拉b 详细信息

值1

---

我在第2列和第3列中添加了一些左边距作为间距。我有绝对底部定位一个新的按钮包装与填充，以中心位置。我在盒子底部添加了一些填充物，以防止按钮与内容重叠。如果按钮变大了，或者按钮文本被包装到另一行，这将产生问题，但是这是我能想到的最好的解决方案

表单输入{ 显示：块； 边缘底部：15px； 宽度：100%； } 表格标签{ 文本对齐：左对齐； 宽度：100%； 显示：块； } .盒式集装箱{ 显示器：flex； 填充物：5px； } .盒子{ flex:1自动； 边框：1px000； 宽度：33.333%； 文本对齐：居中； 框大小：边框框； 填充：10px 10px 40px； 左边距：10px； 位置：相对位置； } .盒子：第一个孩子{ 左边距：0； } .方框p{ 文本对齐：对齐； } .纽扣包装{ 位置：绝对位置； 底部：0； 左：0； 右：0； 填充：10px； } .按钮换行输入{ 保证金：0； } 呜呜呜呜 一些信息dasd asd asd asdasdasfs dsgd dfg sdfg fsdg sdfg s

值1 价值2 布拉布拉布拉达达斯达斯德酒店 更多信息一些信息数据asd asd asd asd an

值1 价值2 价值3 布拉布拉b 详细信息

值1

---

固定模板的高度，并将按钮放置在底部。。这不需要jquery，但只需要css我会更新tagsMy表单没有固定的维度高度

.wrapper > div {
    border: 1px solid #000;
    float: left;
    width: 250px;
    height: 300px;
    margin: 0 10px;
    position: relative;
}

.wrapper {
    margin: 0 auto;
    width: 830px;
}

.wrapper > div > input[type="submit"] {
    position: absolute;
    bottom: 20px;
    left: 25px;
    display: block;
    width: 200px;
}

.clearfix:before, .clearfix:after {
    content: "";
    clear: both;
    display: block;
}

.box h1,
.box p,
.box form {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.box form {
    justify-content: flex-end;
}