兩個div的高度相等

我有2個div（每個6列）。在左邊的div是一個圖片，在div的右邊是一些引用。我希望我的右側div的高度與圖像的高度相同。兩個div的高度相等

這裏是我的代碼：http://codepen.io/matysflance/pen/PZXdBK

<div id="testimonials" class="container-fluid testimonials"> 
    <div class="row"> 
     <div class="col-lg-6 image"> 
       <img src="http://placehold.it/1100x700/f3e42a" alt=""> 
     </div> 
     <div class="col-lg-6 quote"> 
      <blockquote> 
       <p>"Integer posuere erat a ante venenatis dapibus posuere veit al..." </p> 
       <cite>Susan Sims, Interaction Designer at XYZ</cite> 
      </blockquote> 
     </div> 
    </div> 
</div>

來源

2016-02-11 Sebastian Matysiak

您可以使用jQuery

只是類same-height添加到DIV's要具有相同的高度做這個

jQUERY

jQuery(document).ready(function($) { //noconflict wrapper 
    var heights = $(".same-height").map(function() { 
     return $(this).height(); 
    }).get(), 
    maxHeight = Math.max.apply(null, heights); 
    $(".same-height").height(maxHeight); 
});

來源

2016-02-11 14:58:38

您可以將兩個div的容器設置爲flexbox，這會自動將相等高度應用於子元素。

試試這個：

.row { display: flex; }

Revised Codepen

通過使.row柔性容器，孩子（.image和.quote）成爲柔性項目，並默認共享相同的高度。在這裏看到更多的細節：https://stackoverflow.com/a/33815389/3597276

來源

2016-02-11 14:58:42

使用jQuery或純Java腳本。只需取所需元素的高度並將其設置爲您需要編輯的元素。 $(".col-lg-6 quote").height($(".col-lg-6 image").height())

希望它有幫助。

來源

2016-02-11 14:58:59

簡單：

var heightImgDiv = $('.ImgDiv').height(); 
 
    $('.Div').height(heightImgDiv);

div { 
 
    background: red; 
 
    float: left; 
 
    width: 250px; 
 
    margin: 0 10px 0 10px; 
 
} 
 

 
img { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="ImgDiv"><img src="https://fallbacks.carbonads.com/nosvn/fallbacks/4cd1acdff7348a672d30bb3326800d80.jpeg"/></div> 
 
<div class="Div"></div>

來源

2016-02-11 15:06:29 Pedram

類似的問題已經回答了here

爲了方便起見，我將在這裏寫答案也。

Flexbox的

隨着Flexbox將是一個單一的聲明：

.row { 
 
    display: flex; /* equal height of the children */ 
 
} 
 

 
.col { 
 
    flex: 1; /* additionally, equal width */ 
 
    
 
    padding: 1em; 
 
    border: solid; 
 
}

<div class="row"> 
 
    <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
    <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div> 
 
</div>

表佈局

如果您仍然需要支持IE 8或9，那麼你哈哈已經使用表格佈局：

.row { 
 
    display: table; 
 
} 
 

 
.col { 
 
    display: table-cell; 
 
    width: 50%; /* depends on the number of columns */ 
 

 
    padding: 1em; 
 
    border: solid; 
 
}

<div class="row"> 
 
    <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
    <div class="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.</div> 
 
</div>

來源

2016-02-12 11:16:15 Bhavika

兩個div的高度相等

回答

相關問題