Javascript 如何在页面的右侧和左侧放置两个字段集，然后在它们之间的中间放置按钮？

我正在尝试制作一个HTML、CSS和JavaScript教程，我可以处理所需的js。。。我在页面的每一面有2个字段集，但我需要它们之间的按钮。。。我不知道该怎么做。这是我的密码：

正文{
显示：内联；
字体系列：“布拉德利的手”，草书
}
#左{
浮动：左；
宽度：40%；
线高：450px
}
#对{
浮动：对；
宽度：40%；
线高：450px
}
#输入{
显示：块
}

答复


测试

测试

要实现这一点，我将使用flex。最接近您所拥有的是使输入div成为flex显示，并将flex direction设置为column。此外，我在浮动div上使用了box size:border box，这样它们的宽度实际上是40%。请在此处阅读更多信息：

这并不完美，但只是一个开始：

正文{
显示：内联；
字体系列：“布拉德利的手”，草书
}
#左{
浮动：左；
宽度：40%；
线高：450px；
框大小：边框框；
}
#对{
浮动：对；
宽度：40%；
线高：450px；
框大小：边框框；
}
#输入{
显示器：flex；
弯曲方向：立柱；
宽度：18%；
框大小：边框框；
}

答复


测试

测试

要实现这一点，我将使用flex。最接近您所拥有的是使输入div成为flex显示，并将flex direction设置为column。此外，我在浮动div上使用了box size:border box，这样它们的宽度实际上是40%。请在此处阅读更多信息：

这并不完美，但只是一个开始：

正文{
显示：内联；
字体系列：“布拉德利的手”，草书
}
#左{
浮动：左；
宽度：40%；
线高：450px；
框大小：边框框；
}
#对{
浮动：对；
宽度：40%；
线高：450px；
框大小：边框框；
}
#输入{
显示器：flex；
弯曲方向：立柱；
宽度：18%；
框大小：边框框；
}

答复


测试

测试

这会将按钮居中放置在我想要的位置，但右侧的字段集会被按下。。。有没有办法做到这一点。。。我想要3列。请参阅第二个代码段。那应该行，谢谢你！这管用！而且，你回复得很快！这使按钮居中于我想要的位置，但右边的字段集被按下。。。有没有办法做到这一点。。。我想要3列。请参阅第二个代码段。那应该行，谢谢你！这管用！而且，你回复得很快！