时间戳

首页 > 解决方案 > 防止旋转的 div 在页面调整大小时扩展

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

问题描述

我有两个旋转的 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：链接

标签： csssassresponsive

解决方案

他们会随着屏幕宽度的变化做出响应，因为您在屏幕上设置的宽度.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/

推荐阅读