Html 制造两个<；部门>；它在一个100%的包装里

我试图解决一个问题，我有一个固定宽度的居中div（margin:0 auto），其中包含一些内容，然后是一个新div，应该是相邻的div，包装总宽度为100%

左div需要跟随固定宽度包装的左“边距”，而右div只是一个映射

我已经包括了一个插图来更直观地解释事情。我已经到了一个状态，我可以在左div上留有边距，用JS计算（屏幕的宽度-固定宽度div）/2，但是我想看看这是否可以用HTML和CSS实现，我想不出一个方法。有什么想法吗

---

提前谢谢

我不确定我是否理解了你问题中的所有内容，但这似乎很简单：

#第页{
宽度：500px；
高度：200px；
边框：1px实心#555；
位置：相对位置；
}
#包装纸{
位置：绝对位置；
最高：50%；
边缘顶部：-50px；/*包装高度的一半*/
宽度：100%；
高度：100px；
边框：1px纯黑；
框大小：边框框；
-moz框大小：边框框；
}
.孩子{
浮动：左；
宽度：50%；
身高：100%；
}
#左{
背景：蓝色；
}
#对{
背景：粉红色；
}

正文
地图

看看这个，从你的问题来看，我认为它似乎满足了你的需要

。居中对齐{
保证金：0自动；
宽度：60%；
背景色：#808080；
最小高度：300px；
}
.左轮廓{
宽度：40%；
利润率：0-20%；
边界：无；
边界塌陷：塌陷；
填充：0；
显示：内联块；
最小高度：100px；
背景色：#4cff00；
}
.右轮廓{
宽度：100%；
利润率：0-40%0；
边界：无；
边界塌陷：塌陷；
填充：0；
显示：内联块；
最小高度：100px；
背景色：#f00；
}

培根同侧肉多尔阿梅特香克利猪波切塔培根肩。肥背牛肉饼，鹿肉肉饼，磨圆。兰杰格鸡肉丸，卡皮科拉香肠，凯文嫩腰肉。牛腰肉、猪肉糕、鹿肉胸脯、肩胛骨、鸡腿、舌头、kielbasa球尖。Leberkas porchetta肉干doner，香肠意大利腊肠pancetta猪里脊牛排火腿肥背牛肉picanha火腿飞节。
正文
地图
培根同侧肉多尔阿梅特香克利猪波切塔培根肩。肥背牛肉饼，鹿肉肉饼，磨圆。兰杰格鸡肉丸，卡皮科拉香肠，凯文嫩腰肉。牛腰肉、猪肉糕、鹿肉胸脯、肩胛骨、鸡腿、舌头、kielbasa球尖。Leberkas porchetta肉干doner，香肠意大利腊肠pancetta猪里脊牛排火腿肥背牛肉picanha火腿飞节。

这是一个思维的一般概念，即使我想提供一些代码，我发现它几乎没有必要，因为我可能从错误的地方开始。但我将以更深入的方式回答阿波罗。谢谢你的帮助，但这个概念比这要复杂一点。我插图中的灰色区域是包装。除地图外，所有类型的内容都需要保留在该区域中，包括包含“文本”的蓝色区域右侧部分。问题是，蓝色div也必须能够继续向左，无限远，而固定宽度包装中的部分可以具有固定宽度。另一方面，贴图需要是窗口宽度的其余部分，并尽可能长地拉伸。这能更好地解释问题吗？这其实不是一个卑鄙的提议！我唯一缺少的两件事是绿色框的文本与灰色区域对齐，两个彩色框是动态的，也就是说，不管屏幕大小如何，用宽度填充屏幕的其余部分。这些Div将扩展到屏幕的大小，因为它们有%的宽度，您只需使用它们即可获得每个框所需的宽度和边距。绿色Div可以包含您希望使用相同方法与灰色框对齐的任何布局。