html5：如何避免两个div部分重叠？

我正在使用此模板：

设计一个简单的网上商店。它应分为三个垂直区域：左、中、右。左侧区域是一种预览，显示选定产品的图像。中间区域包含产品图片：每当从中间区域选择产品时，通过鼠标在桌面上移动，该产品应显示在左侧预览区域。右侧区域应包含所有选定产品的表格

现在我的问题是，在台式笔记本电脑上，左边和中间的区域部分重叠，右边的区域还没有准备好。我想避免这一部分的重叠。我怎样才能做到这一点？下面是我的css和html：

*{/*@见https://www.w3schools.com/css/css_rwd_grid.asp */ 框大小：边框框；/*确保填充和边框包含在元素的总宽度和高度中*/ } /*对于手机：始终为手机设计第一*/ [类别*=列-]{ 浮动：左； 填充：15px； 宽度：100%； } .productImage>*{ 显示：块； } .产品形象{ 浮动：左； } @仅介质屏幕和最小宽度：600px{/*平板电脑：*/ .col-s-1{宽度：8.33%；} .col-s-2{宽度：16.66%；} .col-s-3{宽度：25%；} .col-s-4{宽度：33.33%；} .col-s-5{宽度：41.66%；} .col-s-6{宽度：50%；} .col-s-7{宽度：58.33%；} .col-s-8{宽度：66.66%；} .col-s-9{宽度：75%；} .col-s-10{宽度：83.33%；} .col-s-11{宽度：91.66%；} .col-s-12{宽度：100%；} } @仅媒体屏幕和最小宽度：768px{/*对于桌面：*/ .col-1{宽度：8.33%；} .col-2{宽度：16.66%；} .col-3{宽度：25%；} .col-4{宽度：33.33%；} .col-5{宽度：41.66%；} .col-6{宽度：50%；} .col-7{宽度：58.33%；} .col-8{宽度：66.66%；} .col-9{宽度：75%；} .col-10{宽度：83.33%；} .col-11{宽度：91.66%；} .col-12{宽度：100%；} .表格图像{ 高度：250px； 宽度：250px； 填充物：5px； } .productImage:悬停{ 背景色：ddd； } } /*清除列后的浮动*/ .罗：之后{ 内容：； 显示：表格； 明确：两者皆有； } .旁白{ 背景色：33b5e5； 填充：15px； 颜色：ffffff； 文本对齐：居中； 字体大小：14px； 盒影：0 1px 3px rgba0,0,0,0.12,0 1px 2px rgba0,0,0,0.24； } /*设置页脚的样式*/ .页脚{ 背景色：F1F1； 填充：10px； 文本对齐：居中； } .chosenProductDetailsImage{/**用于产品详细图像的样式*/ 高度：550px； 宽度：400px； 填充：10px； 背景色：白色； } 网上商店 添加到购物车 ab 12,45欧元 添加到购物车 ab 13,99欧元 添加到购物车 ab 8,00欧元 添加到购物车 ab 7,99欧元 添加到购物车 ab 16,99欧元 添加到购物车 ab 26,99欧元 添加到购物车 ab 24,99欧元 添加到购物车 ab 27,99欧元 什么 查尼亚是克里特岛上的一座城市

哪里 克里特岛是地中海中的一个希腊岛屿

怎样 你可以从欧洲各地到达查尼亚机场

页脚

---

更改媒体查询CSS顺序并在此处更改宽度。chosenProductDetailsImage 100%

*{/*@见https://www.w3schools.com/css/css_rwd_grid.asp */ 框大小：边框框；/*确保填充和边框包含在元素的总宽度和高度中*/ } /*对于手机：始终为手机设计第一*/ [类别*=列-]{ 浮动：左； 填充：15px； 宽度：100%； } .productImage>*{ 显示：块； } .产品形象{ 浮动：左； } @仅媒体屏幕和最小宽度：768px{/*对于桌面：*/ .col-1{宽度：8.33%；} .col-2{宽度：16.66%；} .col-3{宽度：25%；} .col-4{宽度：33.33%；} .col-5{宽度：41.66%；} .col-6{宽度：50%；} .col-7{宽度：58.33%；} .col-8{宽度：66.66%；} .col-9{宽度：75%；} .col-10{宽度：83.33%；} .col-11{宽度：91.66%；} .col-12{宽度：100%；} .表格图像{ 高度：250px； 宽度：250px； 填充物：5px； } .productImage:悬停{ 背景色：ddd； } } @仅介质屏幕和最小宽度：600px{/*平板电脑：*/ .col-s-1{宽度：8.33%；} .col-s-2{宽度：16.66%；} .col-s-3{宽度：25%；} .col-s-4{宽度：33.33%；} .col-s-5{宽度：41.66%；} .col-s-6{宽度：50%；} .col-s-7{宽度：58.33%；} .col-s-8{宽度：66.66%；} .col-s-9{宽度：75%；} .col-s-10{宽度：83.33%；} .col-s-11{宽度：91.66%；} .col-s-12{宽度：100%；} } /*清除列后的浮动*/ .罗：之后{ 内容：； 显示：表格； 明确：两者皆有； } .旁白{ 背景色：33b5e5； 填充：15px； 颜色：ffffff； 文本对齐：居中； 字体大小：14px； 盒影：0 1px 3px rgba0,0,0,0.12,0 1px 2px rgba0,0,0,0.24； } /*风格 页脚*/ .页脚{ 背景色：F1F1； 填充：10px； 文本对齐：居中； } .chosenProductDetailsImage{/**用于产品详细图像的样式*/ 高度：550px； 宽度：100%； 填充：10px； 背景色：白色； } 网上商店 添加到购物车 ab 12,45欧元 添加到购物车 ab 13,99欧元 添加到购物车 ab 8,00欧元 添加到购物车 ab 7,99欧元 添加到购物车 ab 16,99欧元 添加到购物车 ab 26,99欧元 添加到购物车 ab 24,99欧元 添加到购物车 ab 27,99欧元 什么 查尼亚是克里特岛上的一座城市

哪里 克里特岛是地中海中的一个希腊岛屿

怎样 你可以从欧洲各地到达查尼亚机场

页脚

---

非常感谢。我会试试，今天晚些时候或者明天告诉你！