Question

我的背景图片里面有一个角度（下面的片段中的红色圆圈和白色角度）

我想将倾斜的灰色div与白线对齐我可以让它们对齐，但是当我调整浏览器的大小时，它们会分开无论浏览器大小是多少，如何使灰色div与白色角度对齐？

＆＃13;

.container {
  position: relative;
  background: blue;
  width: 100%;
}
.angle-circle {
  background: url('http://mototype.com/pics/4720/small/ducati_circle_d_logo.jpg') top right no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 30%;
  height: 100px;
  z-index: 200;
}
.gray-div {
  transform: skewX(168deg);
  background: #ccc;
  width: 40%;
  height: 100%;
  position: absolute;
  right: -28%;
  z-index: 100;
  /* what to do here to align to the red angle */
}

＆＃13;

<div class="container">
  <div class="angle-circle"></div>
  <div class="gray-div"></div>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries,
  </p>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries,
  </p>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries,
  </p>
</div>

＆＃13;

Answer 1

我会在黑暗中拍摄（因为我几乎不了解你的问题），但调整浏览器大小改变绝对物体的位置听起来有两件事：

1 - 您不会为父母提供与绝对定位的div /元素相关的位置。因此，它将窗口作为参考。

2 - 您正在为父母或其他未显示的地方使用一些百分比单位。因此，更改浏览器窗口，更改距离......

请提供尽可能多的详细信息，并且jsfiddle或工作片段对想要帮助您的我们有很大帮助！：）

<强>更新 http://jsfiddle.net/d2xuf7qm/1/

诀窍是：元素的所有宽度都是基于百分比的，但图像不是。因此，圆必须具有的距离是相对的，因为灰色div的宽度是相对的。但是主要的问题是你有一个固定的圆宽，那么圆是如何知道它需要多少才能超过div，因为它是动态的？使用否定margin-right：）

首先，我将两个元素的百分比对齐，以便它们可以移动，并且仍然并排。然后使用margin-right negative我告诉角度开始以像素为单位，从而将圆圈与div对齐。

将图像角度与偏斜div对齐

1 个答案: