Html Divs安排

我想创建一个html页面，其中左上侧是一个400x200的图像，图像正下方是一个矩形，宽度与图像相同，高度为50px，图像右侧是另一个矩形，宽度与图像相同，高度为50px。 在页面的正确大小上，我想要3个较小的矩形div作为按钮100x50，一个挨着另一个。 我怎样才能做到这一点。我想创建两个容器，将图像和2个div放在左侧，其余3个div放在右侧。 然而，有些东西遗漏了，特别是当分辨率较低或我调整窗口时，排列很糟糕。当分辨率较小时，哪种方法更好。该位置应为左容器绝对位置？提前感谢。 我创造了这个 容器1{宽度：50%；高度：300px；浮动：左；左边距：30px；边距顶部：20px；} 容器1 a{文本装饰：无；} container2{宽度：40%；高度：300px；浮动：右侧；边距左侧：50px；边距顶部：50px；} 容器2 a{文本装饰：无；} col1{float:left；边距：5px；字体大小：14pt；边框：1px；宽度：400px；高度：200px；边框半径：5px；} .col2{浮点：左；背景色：rgb17，83151；边距：10px；边框：1px；边距顶部：75px；宽度：155px；高度：70px；} col3{位置：相对；浮动：左侧；背景色：rgb17，83，151；边距：5px；边距右侧：5px；字体大小：14pt；边框：1px；宽度：110px；高度：200px；边框半径：5px；} .int{text align:center；border 1px；字体系列：segoe UI；字体大小：14pt；颜色：白色；填充顶部：5px；边距：15px；} .int2{文本对齐：居中；边框1px；字体系列：segoe ui；字体大小：14pt；颜色：白色；顶部填充：50px；边距：3px；} col4{位置：绝对；浮点：左；清除：两者；背景色：rgb17，83151；边距：5px；字体大小：14pt；边框：1px；宽度：400px；高度：80px；边框半径：5px；} .按钮{顶部填充：30px；左侧填充：10px；颜色：白色；字体大小：10pt；字体系列：Segoe UI；文本装饰：无；}

---

我注意到的第一件事是，您正在浮动元素并使用边距。切换到填充，这将使您的生活更加轻松，因为计算宽度：

#container1 {width:50%;height:300px;float:left;padding-left:30px;margin-top:20px;}

#container2 {width:50%;height:300px;float:right;padding-left:50px;margin-top:50px;}

只要在css中使用边框框，填充就会占用容器的内部，而不是将其添加到外部。基本上你的集装箱是50%+30px的利润率。我把它改为50%的宽度，加上30像素的填充。现在，您可以做简单的数学运算，而不是计算边距。

我解决了这个问题：但是，我找不到一种方法来调整窗口上固定的列1和列2位置的大小。我在想，一个想法是自动调整图像大小，但它不起作用。此外，换行前的按钮与容器1重叠。我有意添加边框。任何想法，都欢迎。谢谢