Question

古老的问题，但可能会扭曲。我有3个不同内容的div，我需要它们是相同的高度。但是，我正在使用CMS，这有他们的HTML结构是各种奇怪的。它们不是连续的，它们每个都有6个容器div。

这基本上就是我们的样子：

HTML：

<div class="top-div">
  <div>
    <div>
      <div>
        <div>
          <!-- content... -->
        </div>
      </div>
    </div>
  </div>
</div>

repeat...

CSS：

.top-div {
   display: inline-block;
   width: 33%;
}

我有选择吗？

请记住： 我无法更改HTML

jsFiddle： http://jsfiddle.net/5csorg73/

Answer 1

如果您可以使用jQuery，请包含以下脚本：

https://github.com/liabru/jquery-match-height

在Javascript中有一行，你可以在行的所有div中添加相同的高度

<img src="linear.png" id="linear"/>
<img src="img/linear.png" id="linear"/>
<img src="/img/linear.png" id="linear"/>

Answer 2

也许这可能会有所帮助：

.top-div {
  background-color: #ffffff;
  display: inline-block;  
  margin: 2% 0.5%;
  width: 30%;
  position:relative;
  float:left;
}

.top-div * {
    display: inline-block;  
}

.button {
  background-color: red;
  margin: 0 auto;
  padding: 1% 2%;
  text-align: center;
  height:20px;
}

div div div div div{
  height:200px;
}

Answer 3

尝试将vertical-align:top;应用于您的div和固定高度。

匹配不在一排并且嵌套一堆的Div高度

3 个答案: