Divは、後でもっと小さいときでも別のdivの高さを取る

Question

私はWebページを開発しています。私はニュース、div内の他の2つのdiv、左側の画像、タイトル、日付と右のニュースの最初の30語。画像のサイズが何であっても、画像divがテキストdivの高さになるようにしたい。画像は通常、サイズ/アスペクト比が同じではありません。私はそれが応答性であることを望むので、私は固定された次元を避けることを好む。ところで、私はBootstrap 3.3.7を使用しています。

ここに私がこれまで持っていたもののexample。

は、これは私のHTML

<!-- First News --> 
<div class="container-fluid panel panel-default"> 
    <div class="col-xs-12 col-sm-4 news-img-div"> 
    <img src="https://fakeimg.pl/412x112/" alt="img_1" class="img-responsive"> 
    </div> 
    <div class="col-xs-12 col-sm-8 news-text-div"> 
    <h4>News Title 1</h4> 
    <p>Nov 6, 2017</p> 
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p> 
    <a href="" class="btn btn-primary" role="button">See More</a> 
    </div> 
</div> 
<!-- Second News --> 
<div class="container-fluid panel panel-default"> 
    <div class="col-xs-12 col-sm-4 news-img-div"> 
    <img src="https://fakeimg.pl/350x232/" alt="img_2" class="img-responsive"> 
    </div> 
    <div class="col-xs-12 col-sm-8 news-text-div"> 
    <h4>News Title 2</h4> 
    <p>Nov 5, 2017</p> 
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p> 
    <a href="" class="btn btn-primary" role="button">See More</a> 
    </div> 
</div> 
<!-- Third News --> 
<div class="container-fluid panel panel-default"> 
    <div class="col-xs-12 col-sm-4 news-img-div"> 
    <img src="https://fakeimg.pl/243x242/" alt="img_curso" class="img-responsive"> 
    </div> 
    <div class="col-xs-12 col-sm-8 news-text-div"> 
    <h4>News Title 3</h4> 
    <p>Nov 4, 2017</p> 
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p> 
    <a href="" class="btn btn-primary" role="button">See More</a> 
    </div> 
</div> 

であり、これは私がより良い視覚化のためのdivに背景色を設定する（可視化の目的のために）私のCSS

.news-img-div { 
    background-color: red; 
} 
.news-text-div { 
    background-color:aqua; 
} 

です。画像とテキストが同じ行に残るように、結果タブを展開する必要があります。

CSSのみを使用して達成する方法はありますか？それ以外の場合は、jsのソリューションを歓迎します。 2 div秒（container-fluidクラスを有する）を含むdivで

Answer 1

、使用

display: flex; 

これはdivは、容器の同じ高さであり、他のdivと同じ高さを取る画像を作ります。ここで

あなたのコードの修正版です：jsFiddle

編集

は、それは上記のソリューションは、あなたが望むものではないことが判明。

私が欲しいのは、画像divが常にテキストdivの高さをとることです。ここで

は、純粋なJavaScriptでのソリューションです：上記のコードで

function adjustHeight() { 
 
    var containers = document.querySelectorAll(".news-card"); 
 
    Array.prototype.forEach.call(containers, function(con) { 
 
    var imgDiv = con.getElementsByClassName("news-img-cont")[0]; 
 
    var textDiv = con.getElementsByClassName("news-text-cont")[0]; 
 
    var img = imgDiv.getElementsByClassName("news-img")[0]; 
 
    var textDivHeight = textDiv.offsetHeight; 
 
    imgDiv.style.height = String(textDivHeight) + 'px'; 
 
    img.style.maxHeight = String(textDivHeight) + 'px'; 
 
    }); 
 
} 
 
adjustHeight(); 
 
var sch = false; 
 
window.addEventListener("resize", function() { 
 
    if (!sch) { 
 
    sch = true; 
 
    setTimeout(function() { 
 
     sch = false; 
 
     adjustHeight(); 
 
    }, 500); 
 
    } 
 
});

.news-img-cont { 
 
    background-color: red; 
 
} 
 

 
.news-text-cont { 
 
    background-color: aqua; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<!-- First News --> 
 
<div class="container-fluid panel panel-default news-card"> 
 
    <div class="col-xs-12 col-sm-4 news-img-cont"> 
 
    <img src="https://fakeimg.pl/412x112/" alt="img_1" class="img-responsive news-img"> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-8 news-text-cont"> 
 
    <h4>News Title 1</h4> 
 
    <p>Nov 6, 2017</p> 
 
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p> 
 
    <a href="" class="btn btn-primary" role="button">See More</a> 
 
    </div> 
 
</div> 
 
<!-- Second News --> 
 
<div class="container-fluid panel panel-default news-card"> 
 
    <div class="col-xs-12 col-sm-4 news-img-cont"> 
 
    <img src="https://fakeimg.pl/350x232/" alt="img_2" class="img-responsive news-img"> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-8 news-text-cont"> 
 
    <h4>News Title 2</h4> 
 
    <p>Nov 5, 2017</p> 
 
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p> 
 
    <a href="" class="btn btn-primary" role="button">See More</a> 
 
    </div> 
 
</div> 
 
<!-- Third News --> 
 
<div class="container-fluid panel panel-default news-card"> 
 
    <div class="col-xs-12 col-sm-4 news-img-cont"> 
 
    <img src="https://fakeimg.pl/243x242/" alt="img_curso" class="img-responsive news-img"> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-8 news-text-cont"> 
 
    <h4>News Title 3</h4> 
 
    <p>Nov 4, 2017</p> 
 
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p> 
 
    <a href="" class="btn btn-primary" role="button">See More</a> 
 
    </div> 
 
</div>

、我々は各テキストdivの高さを取得し、その後、それぞれの高さは対応します画像divと同等です。

最後の2行の目的：

var img = imgDiv.getElementsByClassName("news-img")[0]; 
img.style.maxHeight = String(textDivHeight) + 'px'; 

は常に彼らのdiv Sに含まれる画像を作ることです。それらがなければ、大きな画像はそのコンテナの外に出るでしょう。

編集2

あなたは

申し訳ありませんと述べていますが、画面を拡大すると画像が大きく取得し、親のdivはの高さにsitckていないため、これは、私の問題を解決しませんテキストdiv。

私はこの問題を解決するためのコードを編集した：heightの前の調整は、現在の関数（adjustHeight）によって行われます。この関数は、ページのサイズが変更されるたびに、ページのロード時にとと呼び出されます。

リサイズ、およびそれらのイベントごとに高さを調整することは良い考えではないかもしれないが、スケジューリングアプローチは、ソリューションをより効率的にするために実装されたイベントのページ火災たくさんのサイズを変更して以来。

Answer 2

私はあなたがそうここにあなたのための1つのオプションですが、jQueryを使って記事をタグ付き参照

...

http://jsfiddle.net/yLyv9fyx/3/

または下記を参照してください（注：私は報告スクリプトエラーがクロスドメインスクリプトによって引き起こされると考えていますブートストラップのためのソースですが、これが間違っていると誰かが私を修正することができます）。

$(".news-img-div").each(function() { 
 
    var textDivHeight = $(this).parent().find("div.news-text-div").height(); 
 
    $(this).height(textDivHeight); 
 
    var imgHeight = $(this).find("img.img-responsive").height(); 
 
    if (imgHeight > textDivHeight) $(this).find("img.img-responsive").height(textDivHeight); 
 
});

.news-img-div { 
 
    background-color: red; 
 
} 
 

 
.news-text-div { 
 
    background-color: aqua; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<!-- First News --> 
 
<div class="container-fluid panel panel-default"> 
 
    <div class="col-xs-12 col-sm-4 news-img-div"> 
 
    <img src="https://fakeimg.pl/412x112/" alt="img_1" class="img-responsive"> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-8 news-text-div"> 
 
    <h4>News Title 1</h4> 
 
    <p>Nov 6, 2017</p> 
 
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p> 
 
    <a href="" class="btn btn-primary" role="button">See More</a> 
 
    </div> 
 
</div> 
 
<!-- Second News --> 
 
<div class="container-fluid panel panel-default"> 
 
    <div class="col-xs-12 col-sm-4 news-img-div"> 
 
    <img src="https://fakeimg.pl/350x232/" alt="img_2" class="img-responsive"> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-8 news-text-div"> 
 
    <h4>News Title 2</h4> 
 
    <p>Nov 5, 2017</p> 
 
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p> 
 
    <a href="" class="btn btn-primary" role="button">See More</a> 
 
    </div> 
 
</div> 
 
<!-- Third News --> 
 
<div class="container-fluid panel panel-default"> 
 
    <div class="col-xs-12 col-sm-4 news-img-div"> 
 
    <img src="https://fakeimg.pl/243x242/" alt="img_curso" class="img-responsive"> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-8 news-text-div"> 
 
    <h4>News Title 3</h4> 
 
    <p>Nov 4, 2017</p> 
 
    <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eu vehicula turpis. Donec tristique consequat libero a dapibus. Quisque in dolor tellus. Suspendisse auctor in libero non porta. Aliquam eu.</p> 
 
    <a href="" class="btn btn-primary" role="button">See More</a> 
 
    </div> 
 
</div>

UPDATE：

これは改善する必要がありますが、あなたはすでに解決策を持っているように見えます：

function updateImgDiv() { 
    $(".news-img-cont").each(function() { 
     var textDivHeight = $(this).parent().find("div.news-text-cont").height(); 
     $(this).height(textDivHeight); 
     var imgHeight = $(this).find("img.img-responsive").height(); 
     if (imgHeight>textDivHeight) $(this).find("img.img-responsive").height(textDivHeight); 
    }); 
} 
updateImgDiv(); 
$(window).resize(function() { 
    updateImgDiv(); 
}); 

： http://jsfiddle.net/yLyv9fyx/5/

はjavascriptに変更