HTML布局麻烦

Question

有人可以帮忙吗？

我正在尝试在HTML和CSS中执行以下布局。此图像只是网站总体布局的粗略表示。 顶栏（或标题）将是例如浅灰色和侧边栏1将是相同的颜色。侧边栏1还具有圆形左下角，侧边栏2具有圆形右上角。我试图重新创建的效果是标题将“流入”侧栏1并且侧边栏2将“流入”页脚。 到目前为止，我已经对盒子进行了编码，看起来它们似乎正在触摸，我也完成了圆角。但是我现在一直坚持的是如何做颜色，以便看起来1流入下一个。这是我到目前为止的一个例子（仍然非常粗糙，因为我只是试图阻止形状等）hansmoolman.com

上面网站中的相关部分是一个名为“这是主要容器”的部分，它大约位于页面的一半，包含侧边栏1（带有Twitter提要的那个）和侧边栏2（全部一个） Lorenm Ipsum的东西）。顶部栏将是带有徽标和导航内容的栏。页脚尚未实现。

有谁能建议我怎么做？我试图远离背景图像，这将代表这一点，因为如果添加更多内容，侧边栏1和2应该能够动态增长并且彼此独立。 或者这可以用背景图像/图像完成吗？

任何人都可以请求帮助，因为我一直在努力的所有解决方案都变得非常凌乱，其他盒子里面和上面都有盒子。它看起来不是很好的代码，我担心它可能无法在所有设备上显示。

如果在这个问题上需要更清晰或代码，请告诉我，我可以提供这两个。

提前致谢

*编辑 - 这是flem建议的可能解决方案

Answer 1

使用像这样的div来构建你的layot（间距只是为了可见性）：

您还需要在每个圆角后面使用相反颜色的元素。 （如果你设置了你的身体背景颜色，你只需要做其中一个。）