Javascript slideUp Div和html列

我正在努力完成下图（文章底部）显示的内容。我只是在搜索字段的顶部工作。我有几个问题； 1） 这就是在html上创建列的正确原因吗？ 2） 我怎样才能把图标放在有灰线的div中间呢？我试着给表单的div加上边框，然后把它放在一个奇怪的地方。另外，当我添加带有箭头的按钮时，它会一直向右移动。即使我调整屏幕大小，它也需要始终位于中心

#搜索表单{
填充顶部：50px；
左缘：18%；
宽度：100%！重要；
}
.专栏1{
}
.专栏2{
}
.专栏3{
}.专栏4{
}
.栏目{
右边距：50px；
马林左：50像素；
高度：200px；
浮动：左；
}
.searchValue{
宽度：200px；
高度：2.1米；
边缘底部：19px；
}
.我的选民{
-webkit外观：菜单列表按钮；
高度：2.4em；
宽度：200px；
}
.无线电按钮搜索{
边缘底部：50px；
}
.基站{
背景色：#14477E；
颜色：#FFE45E；
宽度：150px；
高度：2.4em；
字体大小：粗体；
}
.幻灯片{
背景色：#14477E；
颜色：#FFE45E；
宽度：40px；
填充顶部：10px；
高度：2.4em；
字体大小：粗体；
字体大小：16px；
职位：
左缘：60%；
}

房子
修理零件

英里标杆编号

项目编号



序列号



搜寻
房屋面积

选择一个
4x4
6x6
8x8


开始日期



清楚的
状态

选择一个
持有
xxx
xxx


资产ID





^

1）您的专栏在您所做的工作中表现得非常出色。如果你不介意学习新技术，试试看。它目前非常流行，可以自动调整屏幕大小，同时允许移动元素的断点（假设您在移动设备上，并且希望只有一列而不是两列，您可以这样做！尽管您始终可以创建特定于移动设备的网页，如果您在移动设备上，则可以加载该网页。）

2） 这可能不是最好的方法，但你可以通过这样的方式获得你的图像：

^

我会查看flexbox中的网格布局。浏览器支持正在增长，自动前置器也变得越来越普遍

使用flexbox，您将能够轻松地水平和垂直居中任何您想要的

---

这是一个很好的开始

我不能使用任何库。一切都必须是本土的。我唯一允许使用的库是jQuery，但对于HTML和CSS，只允许使用jQueryplain@TamoDevelopersflexbox是CSS3的一部分如果您只是一个列结构，您可以使用表来保持相似的大小，或flexbox