与jquery相等的高度？

时间：2017-06-15 08:24:01

标签： javascript jquery html css

友 我有一个小项目和我的div中的两列我想要使这些div相等，如果右div比左div大，所以我写了一个代码，因为它是我想要的工作，但在我的项目中，它不会正常工作为什么我不明白。

我想分享我的演示

CodePen Demo

和我的项目enter image description here

当你看到我的图像高度是：169px而我的右边高度是：193px所以你认为我的错误在哪里？

function getListHeight() {
    $(".tur-list .col-lg-5 img").each(function() {
        var getTurHeight = $(this).parents(".tur-list").find(".col-lg-7").outerHeight();
        var getLeftHeight = $(this).parents(".tur-list").find(".col-lg-5 img").outerHeight();
        if (getTurHeight > getLeftHeight) {
            $(this).outerHeight(getTurHeight);
        }
    });
}
$(document).ready(function(){
  getListHeight();
});
.box{
  width:700px;
  margin:30px auto;
}
.tur-list{
  border:1px solid #ccc;
  margin-bottom:15px;
}
img{
width:100%
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="box">

<div class="box">

<div class="tur-list">
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
     <figure>
       <img src="http://content.anitur.com/web/images/240x220/2016-12/yurtdisi_tur_Sq4MvAMnDGjz7rAgEaOIbalkan-sehirleri-turu-4.jpg"/>
      </figure>
    </div>
    <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
      <div class="tur-list-title">
        <h3>This is the title</h3>
        <p>p of title</p>
      </div><!-- title -->
      
      <div class="tur-location">
        <p>Netherlands</p>
      </div><!-- location-->
      
      <div class="tur-list-detay">
        <p>some details here</p>
      </div><!-- detail-->
      
      <div class="tur-bottom-detay">
        <a href="#">Link of box</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis unde voluptatibus ea, possimus totam blanditiis molestiae doloremque ipsa magni maiores fugit? Impedit expedita aspernatur dignissimos ipsa consectetur accusamus praesentium, saepe, fugit incidunt doloribus. Maxime expedita nesciunt, magni accusamus culpa saepe cupiditate tempora cum soluta natus, ea illo quo! Nulla error repudiandae natus vel dicta sequi molestias, possimus optio a dolore laboriosam eligendi impedit nam dolorum! Temporibus necessitatibus alias ullam reiciendis ipsam id quisquam, repudiandae? Quas doloremque, laboriosam quaerat sed veniam, dolores ea aspernatur velit, accusamus eligendi soluta rerum architecto cum fuga? Explicabo assumenda quisquam laudantium quae laborum voluptatem alias harum!</p>
      </div><!-- bottom detail-->
    
    </div>
  </div>
</div>
  
  <div class="tur-list">
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
      <figure>
      <img src="http://content.anitur.com/web/images/240x220/2016-12/yurtdisi_tur_Sq4MvAMnDGjz7rAgEaOIbalkan-sehirleri-turu-4.jpg"/>
      </figure>
    </div>
    <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
      <div class="tur-list-title">
        <h3>This is the title</h3>
        <p>p of title</p>
      </div><!-- title -->
      
      <div class="tur-location">
        <p>Netherlands</p>
      </div><!-- location-->
      
      <div class="tur-list-detay">
        <p>some details here</p>
      </div><!-- detail-->
      
      <div class="tur-bottom-detay">
        <a href="#">Link of box</a>
        <p>another thinks.. bla bla..</p>
      </div><!-- bottom detail-->
    
    </div>
  </div>
</div>



</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>

2 个答案:

答案 0 :(得分：1)

There are many ways to do this, but non will be easy.

One way to do it, with no need to use JavaScript/jQuery:

  1. Use table layout. (HTML)
  2. Set the image as the background of the left column. (CSS)
  3. Set the background image size to 100% width 100% height, which will give you the stretch looking, or use the "background-size: cover;" effect. (CSS)

The concept as following:

<table style="width: 100%;">
    <tr>
        <td style="
            width: 40%;
            background-image: url(https://www.w3schools.com/css/trolltunga.jpg);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            ">
        </td>
        <td style="width: 60%;">
            text<br>
            text<br>
            text<br>
            text<br>
        </td>
    </tr>
</table>

Here's a demo.

答案 1 :(得分：1)

$(document).ready(function () {
    var biggesthei = 0;

    $(".col-lg-5 img, .col-lg-7").each(function () {

        if ($(this).outerHeight() > biggesthei) {
            biggesthei = $(this).outerHeight()
        }

        if ($(window).width() < 100) {
            $(this).outerHeight() = biggesthei

        }

        $(".col-lg-5 img, .col-lg-7").css("min-height", biggesthei);
    });
     });
.box{
  width:700px;
  margin:30px auto;
}
.tur-list{
  border:1px solid #ccc;
  margin-bottom:15px;
}
img{
width:100%
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="box">

<div class="box">

<div class="tur-list">
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
     <figure>
       <img src="http://content.anitur.com/web/images/240x220/2016-12/yurtdisi_tur_Sq4MvAMnDGjz7rAgEaOIbalkan-sehirleri-turu-4.jpg"/>
      </figure>
    </div>
    <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
      <div class="tur-list-title">
        <h3>This is the title</h3>
        <p>p of title</p>
      </div><!-- title -->
      
      <div class="tur-location">
        <p>Netherlands</p>
      </div><!-- location-->
      
      <div class="tur-list-detay">
        <p>some details here</p>
      </div><!-- detail-->
      
      <div class="tur-bottom-detay">
        <a href="#">Link of box</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis unde voluptatibus ea, possimus totam blanditiis molestiae doloremque ipsa magni maiores fugit? Impedit expedita aspernatur dignissimos ipsa consectetur accusamus praesentium, saepe, fugit incidunt doloribus. Maxime expedita nesciunt, magni accusamus culpa saepe cupiditate tempora cum soluta natus, ea illo quo! Nulla error repudiandae natus vel dicta sequi molestias, possimus optio a dolore laboriosam eligendi impedit nam dolorum! Temporibus necessitatibus alias ullam reiciendis ipsam id quisquam, repudiandae? Quas doloremque, laboriosam quaerat sed veniam, dolores ea aspernatur velit, accusamus eligendi soluta rerum architecto cum fuga? Explicabo assumenda quisquam laudantium quae laborum voluptatem alias harum!</p>
      </div><!-- bottom detail-->
    
    </div>
  </div>
</div>
  
  <div class="tur-list">
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
      <figure>
      <img src="http://content.anitur.com/web/images/240x220/2016-12/yurtdisi_tur_Sq4MvAMnDGjz7rAgEaOIbalkan-sehirleri-turu-4.jpg"/>
      </figure>
    </div>
    <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
      <div class="tur-list-title">
        <h3>This is the title</h3>
        <p>p of title</p>
      </div><!-- title -->
      
      <div class="tur-location">
        <p>Netherlands</p>
      </div><!-- location-->
      
      <div class="tur-list-detay">
        <p>some details here</p>
      </div><!-- detail-->
      
      <div class="tur-bottom-detay">
        <a href="#">Link of box</a>
        <p>another thinks.. bla bla..</p>
      </div><!-- bottom detail-->
    
    </div>
  </div>
</div>



</div>
</div>

Equal height using jquery

function equalHeight() {
    var biggesthei = 0;
    $(".tur-list .col-lg-5 img, .tur-list .col-lg-7").each(function () {

        if ($(this).height() > biggesthei) {
            biggesthei = $(this).height()
        }

        if ($(window).width() < 640) {
            $(this).height() = biggesthei

        }

        $(".tur-list .col-lg-5 img, .tur-list .col-lg-7").css("min-height", biggesthei);
    });
}
$(document).ready(function () {
        equalHeight();
    }):
    $(window).resize(function () {
        equalHeight();
    });
相关问题
最新问题