Html 将div安排在正确的位置

我在整理我的DIV时遇到了很大的问题，因为我发现这件事并不像看起来那么简单，只要放一个DIV，在这个DIV中再放一个2，你就完成了。下图显示了我希望页面的结构： sur1。 冲浪2：冲浪左，冲浪右。冲浪3。在哪里冲浪。表示另一行，表示div应该是一个接一个的。 而且也不能将图像垂直居中，并从surf 2父对象的surfright上居中。

@font-face
{
字体系列：字体；
src:url（Montserrat Regular.ttf）；
}
p、 标题1
{
字号：2.5em；
保证金：0；
}
p、 标题2
{
字号：3em；
}
.i1
{
高度：400px；
浮动：对；
显示：块；
边缘顶部：150px；
}
第1组
{
显示：块；
背景图片：url（“surf1.jpg”）；
背景位置：中心；
背景尺寸：封面；
高度：600px；
}
第2组{
宽度：适合的内容；
位置：绝对位置；
背景：#41c3ac；
高度：600px；
}
左分区{
浮动：左；
显示：块；
宽度：45%；
填充顶部：80px；
高度：600px；
背景#8C78B1；
}
右侧分区{
浮动：对；
背景#ff6b57；
}
第3分部
{
背景#ff6b57；
高度：600px；
}
第4分部
{
背景#8C78B1；
高度：600px；
}
第1部分
{
填充顶部：100px；
颜色：白色；
文本对齐：居中；
字号：2.5em；
}
分区按钮
{
文本对齐：居中；
字号：1.5em；
保证金：0自动；
宽度：15%；
填充：8px；
边框：2倍实心；
边框颜色：#e7dd84；
背景色：rgba（236229167,0.2）；
颜色：#e7dd84；
过渡：0.35s；
}
div.按钮：悬停
{
背景色：白色；
颜色：黑色；
边框颜色：白色；
过渡：0.35s；
}
身体
{
保证金：0；
字体系列：字体；
颜色：白色；
}

欢迎
欢迎来到smartlearning.com，
您可以学习和练习英语的地方






到现场
活动间游戏

我们有不同类型的游戏，你可以玩，测试你识别物体的能力，多种选择练习，还可以测试你发现错误的能力
这些游戏旨在将乐趣与勤奋结合起来，帮助您学习和练习英语。

请注意，您可以使用正确的宽度值在设计中形成细边

div.surf1
{
显示：块；
背景色：#cdcdcd；
高度：100px；
}
第2组{
背景：#41c3ac；
高度：100px；
}
左分区{
浮动：左；
显示：块；
宽度：50%；
高度：100px；
背景#8C78B1；
}
右侧分区{
浮动：对；
宽度：50%
背景#ff6b57；
}
第3分部
{
背景#ff6b57；
高度：100px；
}
第4分部
{
背景#8C78B1；
高度：100px；
}
身体
{
保证金：0；
字体系列：字体；
颜色：白色；
}

冲浪1
向左冲浪
向右冲浪
冲浪3
冲浪4

如果您尝试使用flexbox。我不会为这个做你自己的造型。我会使用bootstrap或其他通用框架。你的很多问题都已经用这些框架解决了，而且这些框架是由比你或我聪明得多的人设计的。我更愿意说，经验更丰富的人，聪明得多意味着拥有同等的知识，并比其他人更好地使用它。（这也成功地将图像居中放置在DIV中。我感谢您的帮助！