修改

Question

我正在开发一个网页，其中我有一个新闻列表，里面有2个其他div的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>

这是我的CSS（用于可视化目的）

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

我为div设置了背景颜色，以便更好地显示。您可能需要展开结果选项卡，以使图像和文本保持在同一行。

有没有办法只使用CSS？否则，我欢迎使用js解决方案。

Answer 1

在包含两个div s（div类）的container-fluid上，使用

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的高度等于它。

最后两行的目的：

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

是使图像始终包含在div中。没有它们，大图像就会出现在它的容器之外。

编辑2

你说

很抱歉，但这并不能解决我的问题，因为当您展开屏幕时，图像变得更大，而且它们的父div不会达到文本div的高度。

我已编辑代码来解决此问题：height的先前调整现在由函数（adjustHeight）完成。每当页面调整大小时，都会在页面加载，和上调用此函数。

由于调整页面大小会在调整大小时激活很多事件，并且调整每个事件的高度可能不是一个好主意，调度方法已经旨在提高解决方案的效率。

Answer 2

我看到你用jQuery标记了帖子，所以这里有一个选项...

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

或者见下文（注意：我认为报告的脚本错误是由引导程序的跨域脚本来源引起的，但如果这是不准确的，有人可以纠正我。）

＆＃13;

$(".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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

<强>更新

这应该是一种改进，但看起来您已经有了解决方案：http://jsfiddle.net/yLyv9fyx/5/

Javascript改为：

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();
});

Div取另一个div的高度，即使后者较小

2 个答案:

修改

编辑2