javascript - 使用 jquery 使父子 div 的高度不相等？

Question

我正在尝试修复不允许更改 html 或 css 结构的客户端错误。正如您所看到的，有 3 个并排的 div block 是使用 Bootstrap 创建的并且是响应式的。当其中一个 div 的标题很长或内容很长时(在本例中为第一个)，就会出现问题。我猜通过 Bootstrap 自动设置的高度使所有 3 个 div 都没有，因为其中一个需要更多空间来添加内容。他们通常没有像我的例子那样长的标题，但即使稍长的标题也会使 div 不均匀，就像在 iPad 大小的屏幕上一样。我如何在 jquery 中定位这些 div，并且可能有一个 if else 来检查其中一个 div 是否更长，其他 2 将自动调整它的高度

.homefont {
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.home-sub-head h1 {
    color: #006ac3;
}

.home-sub-content p {
    color: #7c7f7e;
    margin-top: 15px;
    font-size: 16px;
    margin-bottom: 30px;
}

.doc-content h3 {
    color: #0a5185;
    margin-top: 0px;
    padding-top: 20px;
}

.doc-content {
    background: #f1f1f1;
    padding: 0px 15px 30px 15px;
}

    .doc-content ul li:before {
        font-family: FontAwesome;
        content: "\f105";
        float: left;
        width: 1.4em;
        margin-left: -35px;
        background: #0a5185;
        margin-right: 14px;
        text-align: center;
        color: white;
        font-weight: bold;
        margin-top: 5px;
    }

    .doc-content ul {
        list-style: none;
    }

        .doc-content ul li {
            margin-bottom: 20px;
        }

.doc-content1 h3 {
    color: #726d7b;
}

.doc-img img {
    height: 196px !important;
    max-width: 100%;
}

    .doc-img img:hover {
        transform: scale(1.1);
    }

.doc-img img {
    -webkit-transition: -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="homefont">
    <div class="space-after-content">
        <div class="col-md-4 col-sm-4">
            <div class="doc-img">
<img src="https://assets.pando.com/uploads/2012/12/html5-logoreal1.png">


</div>
            <div class="doc-content">
                <div class="text-center">
                    <h3>Title oneeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</h3>
                </div>
<ul>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>

</ul>
            </div>
        </div>
       <div class="col-md-4 col-sm-4">
            <div class="doc-img">
<img src="https://assets.pando.com/uploads/2012/12/html5-logoreal1.png">


</div>
            <div class="doc-content">
                <div class="text-center">
                    <h3>Title one</h3>
                </div>
<ul>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>

</ul>
            </div>
        </div>
   <div class="col-md-4 col-sm-4">
            <div class="doc-img">
<img src="https://assets.pando.com/uploads/2012/12/html5-logoreal1.png">


</div>
            <div class="doc-content">
                <div class="text-center">
                    <h3>Title one</h3>
                </div>
<ul>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>
<li>jackson</li>

</ul>
            </div>
        </div>
    </div>
</div>

Answer 1

可以遍历它们并获取所有高度并存储最高高度，然后在所有高度上设置该高度。

请注意，这并未考虑图片加载时间。

另一种方法是对它们应用内联 flexbox css

var maxHt = 0;
$('.doc-content').each(function() {
  var ht = $(this).height();
  maxHt = ht > maxHt ? ht : maxHt;
}).height(maxHt);

.homefont {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

.home-sub-head h1 {
  color: #006ac3;
}

.home-sub-content p {
  color: #7c7f7e;
  margin-top: 15px;
  font-size: 16px;
  margin-bottom: 30px;
}

.doc-content h3 {
  color: #0a5185;
  margin-top: 0px;
  padding-top: 20px;
}

.doc-content {
  background: #f1f1f1;
  padding: 0px 15px 30px 15px;
}

.doc-content ul li:before {
  font-family: FontAwesome;
  content: "\f105";
  float: left;
  width: 1.4em;
  margin-left: -35px;
  background: #0a5185;
  margin-right: 14px;
  text-align: center;
  color: white;
  font-weight: bold;
  margin-top: 5px;
}

.doc-content ul {
  list-style: none;
}

.doc-content ul li {
  margin-bottom: 20px;
}

.doc-content1 h3 {
  color: #726d7b;
}

.doc-img img {
  height: 196px !important;
  max-width: 100%;
}

.doc-img img:hover {
  transform: scale(1.1);
}

.doc-img img {
  -webkit-transition: -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="homefont">
  <div class="space-after-content">
    <div class="col-md-4 col-sm-4">
      <div class="doc-img">
        <img src="https://assets.pando.com/uploads/2012/12/html5-logoreal1.png">


      </div>
      <div class="doc-content">
        <div class="text-center">
          <h3>Title oneeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeeeeeeeeeeeeeee eeeeeeeeeeeeeeeeee
          </h3>
        </div>
        <ul>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>

        </ul>
      </div>
    </div>
    <div class="col-md-4 col-sm-4">
      <div class="doc-img">
        <img src="https://assets.pando.com/uploads/2012/12/html5-logoreal1.png">


      </div>
      <div class="doc-content">
        <div class="text-center">
          <h3>Title one</h3>
        </div>
        <ul>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>

        </ul>
      </div>
    </div>
    <div class="col-md-4 col-sm-4">
      <div class="doc-img">
        <img src="https://assets.pando.com/uploads/2012/12/html5-logoreal1.png">


      </div>
      <div class="doc-content">
        <div class="text-center">
          <h3>Title one</h3>
        </div>
        <ul>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>
          <li>jackson</li>

        </ul>
      </div>
    </div>
  </div>
</div>