Html 如何在窗口变小的情况下保持相同的div宽度

我正在用css在绿地上建造一座漂亮的房子，问题是漂亮的红色屋顶不想固定在房子上。我也没有使用响应技术来创建它，我想让矩形和三角形同时移动，同时缩小浏览器窗口，直到它们（矩形和三角形）有一定的宽度并停止移动（并且它们在移动时保持宽度）

如您所见，屋顶和房子“不匹配”，如果您使用整个浏览器查看结果，它将正常（屋顶和房子）

有什么需要帮忙的吗当我缩小浏览器窗口时，为什么矩形和三角形不一起移动？（如果您想查看我的代码片段，请使用全屏） 谢谢大家

.yellow house{
宽度：100%；
高度：800px；
保证金：0自动；
背景颜色：绿色；
}
.content-rect{
宽度：100%；
保证金：0自动；
}
.直肠{
最小宽度：720px；
位置：相对位置；
宽度：720px；
高度：200px；
保证金：0px自动；
边缘底部：0px；
边界半径：20px；
背景色：#F9C232；
}
.内容三{
宽度：48.4%；
保证金：0自动；
}
崔先生{
位置：相对位置；
宽度：0px；
高度：0px；
左边框：345px实心透明；
右边框：345px实心透明；
边框底部：80px实心红色；
}

---

出现此问题是因为

.content tri

具有动态宽度值，例如

48.34%

，而

.content rect

具有固定值，例如

720px

。这使得

.content tri

的计算边距发生变化

为

.content tri

的宽度设置一个固定值，您的房子将有屋顶

.yellow house{
宽度：100%；
高度：800px；
背景颜色：绿色；
}
.content-rect{
宽度：100%；
保证金：0自动；
}
.直肠{
最小宽度：720px；
位置：相对位置；
宽度：720px；
高度：200px；
保证金：0px自动；
边缘底部：0px；
边界半径：20px；
背景色：#F9C232；
}
.内容三{
宽度：690px；
保证金：0自动；
}
崔先生{
位置：相对位置；
宽度：0；
身高：0；
左边框：345px实心透明；
右边框：345px实心透明；
边框底部：80px实心红色；
}

---

出现此问题是因为

.content tri

具有动态宽度值，例如

48.34%

，而

.content rect

具有固定值，例如

720px

。这使得

.content tri

的计算边距发生变化

为

.content tri

的宽度设置一个固定值，您的房子将有屋顶

.yellow house{
宽度：100%；
高度：800px；
背景颜色：绿色；
}
.content-rect{
宽度：100%；
保证金：0自动；
}
.直肠{
最小宽度：720px；
位置：相对位置；
宽度：720px；
高度：200px；
保证金：0px自动；
边缘底部：0px；
边界半径：20px；
背景色：#F9C232；
}
.内容三{
宽度：690px；
保证金：0自动；
}
崔先生{
位置：相对位置；
宽度：0；
身高：0；
左边框：345px实心透明；
右边框：345px实心透明；
边框底部：80px实心红色；
}

像这样更改css

 .content-tri{
  width: 720px;
  margin: 0 auto;
  }
  .tri{

    border-left: 375px solid transparent;
    border-right: 345px solid transparent;
    border-bottom: 80px solid red;
   }

像这样改变你的css

 .content-tri{
  width: 720px;
  margin: 0 auto;
  }
  .tri{

    border-left: 375px solid transparent;
    border-right: 345px solid transparent;
    border-bottom: 80px solid red;
   }

---

使用绝对位置？此问题是因为您的红色三角形边框位于pixels@Andrew例如，我没有使用绝对值（对于矩形）的原因是为了使它居中（如果我使用绝对，我需要将边距放在左边，然后将值放在中间，如果窗口较小，矩形将不会向左移动（边距放在左边））使用绝对位置？这个问题是因为您的红色三角形边框在中间pixels@Andrew我没有使用绝对值的原因（对于矩形）例如，用于将其居中（如果我使用绝对值，我需要将边距放在左边，然后将值放在中间，如果窗口较小，矩形将不会向左移动（边距放在左边））太棒了现在我明白我的错误了非常感谢你是一个伟大的css木匠TasosAwesome现在我明白我的错误了非常感谢你是一个伟大的css木匠Tasos