jqueryを使用して親子divの等高さを作成していませんか？

Question

私はhtmlやcssの構造を変更できないクライアントのバグを修正しようとしています。あなたが見ることができるように、3つのdivブロックが並んでいて、ブートストラップを使って作成され、応答性があります。問題は、divのいずれかのタイトルの1つが長いか、コンテンツが長い場合（この場合は最初のもの）に発生します。ブートストラップを介して自動推測される高さは、3つのdivすべてがコンテンツを追加するためにさらに多くのスペースを必要とするにもかかわらず、すべてのdivになりません。彼らは通常長い広告私の例として長いタイトルを持っていないが、さらに少し長いタイトルは、iPadのサイズの画面のように不均一なdivになります。どのように私はjQueryのでこれらのdivのをターゲットにすることができますし、多分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

でき、それらをループしてもらうすべてです高さと最高を格納し、すべての高さを設定します。

画像の読み込み時間を考慮していないことに注意してください。

別のアプローチは、なぜあなたは `h1`ため` MAX-width`と `MAX-height`を設定すると`オーバーフローを設定していけない

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>