Question

我试图将包含文本的红色边框拉伸到父div的底部。高度100％不会做到这一点。它基本上需要与图像的高度相同。

注意：查看演示时，可能需要缩小浏览器窗口。

当3：2图像设置高度时，如何才能正确调整尺寸？

非常感谢您的帮助！

＆＃13;

.the-window {
  width: 100%;
  height: auto;
  display: block;
  float: left;
}

.the-image img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.the-image {
  float: left;
  background-size: cover !important;
  width: 45%;
  background-position: center center !important;
  display: block;
  background: pink;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-right: none;
}

.the-details {
  display: block;
  float: left;
  width: 55%;
  height: 80px;
  box-sizing: border-box;
  border: 1px solid red;
  padding: 10px;
  overflow: hidden;
}

.the-header {
  padding: 0;
  font-size: 14px;
  color: #333;
}

＆＃13;

<div class="the-window">
  <a href="#">
    <div class="the-image" style="background:url('#')">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Aspect_ratio_-_3x2.svg/270px-Aspect_ratio_-_3x2.svg.png" alt="">
    </div>
  </a>
  <div class="the-details">
    <h4 class="the-header"><a href="#">Some text will be going in here</a></h4>
  </div>
</div>

＆＃13;

Answer 1

您可以使用 Flexbox 执行此操作：

/* commented out the unnecessary styles */

* {box-sizing:border-box} /* use * {box-sizing:border-box;margin:0;padding:0} to keep the same height of both all the way up when resized vertically */
html, body {margin:0}

.the-window {
  /*width: 100%;*/
  /*height: auto;*/
  /*float: left;*/
  display: flex; /* displays flex-items (children) inline, where flex-items have the same height by default, which is dictated by the height of the "tallest" one / can also use the display: inline-flex if you only want it to take the contents width */
}

.the-image img {
  display: block;
  max-width: 100%; /* modified */
  max-height: 100vh; /* vertically responsive */
  margin: 0;
}
.the-image {
  /*float: left;*/
  background-size: cover !important;
  /*width: 45%;*/
  background-position: center center !important;
  /*display: block;*/
  background: pink;
  border: 1px solid #ccc;
  border-right: none;
}
.the-details {
  /*flex: 1; uncomment if you want it to take the remaining horizontal space*/
  /*display: block;*/
  /*float: left;*/
  /*width: 55%;*/
  /*height: 80px;*/
  border: 1px solid red;
  padding: 10px;
  overflow: hidden;
}
.the-header {
  padding: 0;
  font-size: 14px;
  color: #333;
}

<div class="the-window">
  <a href="#">
    <div class="the-image" style="background:url('#')">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/de/Aspect_ratio_-_3x2.svg/270px-Aspect_ratio_-_3x2.svg.png" alt="">
    </div>
  </a>
  <div class="the-details">
    <h4 class="the-header"><a href="#">Some text will be going in here</a></h4>
  </div>
</div>

Answer 2

一种方法是使用flexbox，如另一个答案所示。另一种方法是将图像放在“细节”容器（具有100％宽度或任何所需宽度）内，将图像浮动到左侧并将namespace Mynamespace; use Doctrine\ORM\Mapping as ORM; /** * @ORM\Table(name="pays") * @ORM\Entity */ class Pays { }和height: auto添加到其容器中它包裹了图像的完整高度。

我删除了以下代码段中不必要的CSS，并在图片中添加了overflow: auto以创建与文本的距离：

margin-right

.the-details {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border: 1px solid red;
  overflow: auto;
}

.the-details img {
  float: left;
  margin-right: 20px;
}

.the-header {
  font-size: 14px;
  color: #333;
}

Answer 3

尝试从var arr = [ [ null, 10222, 10222, null,9999 ],[ 1870963, 1845801, 1830263, null, null ],[ 1870963, 1845801, 1830263, null, null ],[ null, null, null, null, null ]]; var result = arr.reduce((r,a,j) => { a.forEach((v,i) => { r[i] = (r[i]||0) + (v||0); }); return r; },[]); console.log(result);移除高度，然后将.the-details添加到display:flex; align-items:stretch;的样式并提供.the-window .the-image

Div没有正确调整大小以达到其父级的高度

3 个答案: