Question

我有两个旋转的div，它们应与页面扩展保持相同的距离，并且不会增长。但是，随着它们当前的设置，它们会扩展，并且它们之间的空间也会增加。我需要它们在页面扩展时保持它们的距离和宽度，并且不确定为什么它们不像当前设置的那样：

<div class="masthead-wrapper">
  <div class="masthead-two-boxes-angled-wrapper">
    <div class="left">Left</div>
    <div class="right">Right</div>
  </div>
</div>



.masthead-wrapper {
  z-index: 0;
  width: 100%;
  margin-bottom: 10px;
  .masthead-content {
    position: relative;
    display: flex;
    width: 1172px;
    background-color: #fff;
    margin: 0 auto;
  }
  .masthead-two-boxes-angled-wrapper {
    height: 400px;
    margin: 0 auto;
    display: flex;
    z-index: 0;
    transform: rotate(-45deg);
    .left {
      width: 45%;
      background-color: #eee;
      height: 100%;
      margin: 0 auto;
      top: -20px;
      position: relative;
    }
    .right {
      width: 40%;
      background-color: #eee;
      height: 100%;
      margin: 0 auto;
      bottom: 20px;
      position: relative;
      box-shadow: 0 -22px 29px 10px #cecece;
    }
  }
}

JSFIDDLE：Link

Answer 1

随着屏幕宽度的变化，它们正在响应，因为您在.masthead-wrapper上设置的宽度是百分比。将其更改为像素宽度将可以防止调整大小。但是，对于像素宽度，您可能必须设置不同的断点，以调整希望左右框在台式机，平板电脑和移动设备上显示的方式。

示例：

.masthead-wrapper {
    z-index: 0;
    width: 100%;
    margin-bottom: 10px;

    /* Tablet */
    @media (min-width: 480px) {
        width: 400px;
    }

    /* Desktop */
    @media (min-width: 960px) {
        width: 600px;
    }
}

此外，您正在设置一个样式，该样式在HTML（.masthead-content）中未引用。您可以将其完全删除，除非出于其他原因需要它。希望这会有所帮助。

更新的小提琴：http://jsfiddle.net/meq31d0x/25/

防止旋转的div在页面调整大小时扩展

1 个答案: