Question

我想要实现的是将中间div的高度与左侧div的高度和右侧的右侧相匹配。右侧div高度的左侧。

我已经尝试过可以开始使用的比例，但是如果调整窗口大小，则比例不匹配。

有什么想法？谢谢你的帮助！

<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
    padding: 50px;
    width:15%;
    border: 1px solid black;
    background-color: red;
    display: inline-block;
    transform:     perspective(13.5em) rotateY(5deg);
}

#div2 {
    padding: 50px;
    width:15%;
    border: 1px solid black;
    background-color: blue;
    display: inline-block;
}

#div3 {
    padding: 50px;
    width:15%;
    border: 1px solid black;
    background-color: red;
    display: inline-block;
    transform:     perspective(13.5em) rotateY(-5deg);
}
</style>
</head>
<body>

<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

</body>
</html>

Answer 1

你走了。

#div1 {
  padding: 50px;
  width: 15%;
  border: 1px solid black;
  background-color: red;
  display: inline-block;
  transform: perspective(13.5em) rotateY(5deg);
}
#div2 {
  padding: 48px;
  width: 15%;
  border: 1px solid black;
  background-color: blue;
  display: inline-block;
  margin-bottom: 2px;
}
#div3 {
  padding: 50px;
  width: 15%;
  border: 1px solid black;
  background-color: red;
  display: inline-block;
  transform: perspective(13.5em) rotateY(-5deg);
}

<div id="div1"></div>

<div id="div2"></div>

<div id="div3"></div>

Answer 2

首先，让我们增加旋转角度，以便更容易看到问题。

现在，解决方案：您希望旋转元素的内边缘与非旋转元素的大小相匹配。

只需将变换原点设置为此边框即可。这样，所述边框不会移动，并且它自然地匹配内部div的大小

#div1 {
  background-color: red;
  transform: perspective(13.5em) rotateY(30deg);
  transform-origin: right center;
}
#div2 {
  background-color: blue;
}
#div3 {
  background-color: red;
  transform: perspective(13.5em) rotateY(-30deg);
  transform-origin: left center;
}

div {
  width: 15%;
  border: 1px solid black;
  margin-top: 30px;
  padding: 50px;
  display: inline-block;
}

<div id="div1"></div>

<div id="div2"></div>

<div id="div3"></div>

Answer 3

这是一个JS小提琴：https://jsfiddle.net/9ys3hkfe/

如果其他两个div的轮换会发生变化，那么您必须计算其边缘＆＃39;基于旋转量的高度，然后应用中间div的填充和边距底部。

Answer 4

您可以使用此库：http://brm.io/jquery-match-height/

非常容易使用，例如：

HTML：

<div id="div1 equal-height"></div>
<div id="div2 equal-height"></div>
<div id="div3 equal-height"></div>

Jquery的：

$('.equal-height').matchHeight({
    byRow: true,
    property: 'height',
    target: null,
    remove: false
});

问候！

如何将div的高度与另一个div的透视高度相匹配？

4 个答案: