Question

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

正如你所看到的，屋顶和房屋不匹配＆＃34;如果您使用整个浏览器查看结果，那就可以了（屋顶和房屋）

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

＆＃13;

.yellow-house{
  width: 100%;
  height: 800px;
  margin: 0 auto;
  background-color: green;
}

.content-rect{
  width: 100%;
  margin: 0 auto;
  
}
.rect{
  min-width: 720px;
  position:relative;
  width: 720px;
  height: 200px;
  margin: 0px auto;
  margin-bottom: 0px;
  border-radius: 20px;
  background-color: #F9C232;
}
.content-tri{
  width: 48.4%;
  margin: 0  auto;
}
.tri{
    position: relative;
    width: 0px;
    height: 0px;
    border-left: 345px solid transparent ;
    border-right: 345px solid transparent;
    border-bottom: 80px solid red;
}

＆＃13;

<div class="yellow-house">
    <div class="content-tri"><div class="tri"></div></div>
    <div class="content-rect"><div class="rect"></div></div>
</div>

＆＃13;

Answer 1

出现此问题是因为.content-tri具有动态宽度值，例如48.34%，而.content-rect具有固定值，例如720px。这使得.content-tri的计算余量发生变化。

为.content-tri的宽度设置一个固定值，你的房子将有它的屋顶。

.yellow-house{
  width: 100%;
  height: 800px;
  background-color: green;
}

.content-rect{
  width: 100%;
  margin: 0 auto;
  
}
.rect{
  min-width: 720px;
  position:relative;
  width: 720px;
  height: 200px;
  margin: 0px auto;
  margin-bottom: 0px;
  border-radius: 20px;
  background-color: #F9C232;
}
.content-tri{
  width: 690px;
  margin: 0  auto;
}
.tri{
    position: relative;
    width: 0;
    height: 0;
    border-left: 345px solid transparent ;
    border-right: 345px solid transparent;
    border-bottom: 80px solid red;
}

<div class="yellow-house">
    <div class="content-tri"><div class="tri"></div></div>
    <div class="content-rect"><div class="rect"></div></div>
</div>

这是一个带有演示的jsfiddle。

Answer 2

像

一样改变你的CSS

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

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

即使窗口变小，如何保持相同的div宽度

2 个答案: