Html 缩放页面时，div框的对齐方式会改变并发生碰撞

我在container类中创建了两个

div

框。放大和缩小页面时，div框的对齐方式会发生更改并相互碰撞。我附加了我的HTML和CSS。我需要在放大和缩小时将

div

框固定在容器类中。我被困在这里了。需要帮忙吗

无标题文件
*{
保证金：0；
填充：0；
字体系列：Arial、Helvetica、无衬线字体；
}
身体{
背景色：#e1e3e4；
}
梅因先生{
宽度：90%；
保证金：0自动；
}
标题{
高度：160px；
背景色：#3c948b；
}
.集装箱{
背景色：#F3；
最小高度：500px；
}
.内容{
浮动：左；
位置：相对位置；
顶部：10px；
左：10px；
边框：2px实心#111；
宽度：70%；
}
.小组{
位置：相对位置；
浮动：左；
顶部：10px；
左：20px；
边框：2px实心#111；
宽度：330px；
}
我的个人博客
#内容
#面板

由于您的

#内容

占据了当前窗口宽度的70%，因此

#面板

只有30%。但它的固定宽度为330px，因此当窗口小于约1000px时，它无法并排安装。此外，边框、填充物等使用房间，因此所需的最小窗宽更大

使用两个元素的相对宽度（70%/30%）并设置样式来计算实际宽度，以包括填充和边框（

边框框

）。

由于

内容

占当前窗口宽度的70%，而

面板

仅占30%。但它的固定宽度为330px，因此当窗口小于约1000px时，它无法并排安装。此外，边框、填充物等使用房间，因此所需的最小窗宽更大

---

使用两个元素的相对宽度（70%/30%）并设置样式来计算实际宽度，以包括填充和边框（

边框框

）。

如何删除浮动并使用

显示：表格进行操作



无标题文件
*{
保证金：0；
填充：0；
字体系列：Arial、Helvetica、无衬线字体；
}
身体{
背景色：#e1e3e4；
}
梅因先生{
宽度：90%；
保证金：0自动；
}
标题{
高度：160px；
背景色：#3c948b；
}
.集装箱{
宽度：100%；
显示：表格；
背景色：#F3；
最小高度：500px；
}
.内容{
显示：表格单元格；
顶部：10px；
边框：2px实心#111；
宽度：70%；
}
.小组{
显示：表格单元格；
顶部：10px；
边框：2px实心#111；
宽度：330px；
}
我的个人博客
#内容
#面板
如何移除浮动并使用
显示：表格进行操作



无标题文件
*{
保证金：0；
填充：0；
字体系列：Arial、Helvetica、无衬线字体；
}
身体{
背景色：#e1e3e4；
}
梅因先生{
宽度：90%；
保证金：0自动；
}
标题{
高度：160px；
背景色：#3c948b；
}
.集装箱{
宽度：100%；
显示：表格；
背景色：#F3；
最小高度：500px；
}
.内容{
显示：表格单元格；
顶部：10px；
边框：2px实心#111；
宽度：70%；
}
.小组{
显示：表格单元格；
顶部：10px；
边框：2px实心#111；
宽度：330px；
}
我的个人博客
#内容
#面板
谢谢您的回复，先生。。我是这里的新手。为了更好地理解，你能用示例代码解释我吗@谢谢你的回复，先生。。我是这里的新手。为了更好地理解，你能用示例代码解释我吗@是的，这很有效。非常感谢你@PiotrZientara和所有人。是的，这很有效。非常感谢你@PiotrZientara和所有人。