CSS-div扩展高度以匹配同级 [英] CSS - div extend height to match sibling

问题描述

下面的代码给出以下结果:

The code below gives this result:

除了以下三个事实，这与我想要的结果非常接近:

Which is very close to the result I want except three facts:

1. 为什么在图片的底部有一个非常奇怪的灰色区域?
2. 如何使橙色div延伸到图片的底部?我尝试了 height:100％，但这没用...
3. 如何在文本和图片的div之间留出10像素的间距?

所需结果:

div.div1 {
  background-color: yellow;
  border: 1px solid black;
  padding: 10px;
  overflow: auto;
}

div.div2 {
  border: 1px solid gray;
  float: right;
}

div.div3 {
  background-color: orange;
  border: 1px solid gray;
  height: 100%;
  padding: 10px;
}

<div class="div1">
  <div class="div2">
    <img src="http://splendidwillow.com/wp-content/uploads/2012/04/Allium-Purple-garlic-flowers-200x200.jpg">
  </div>
  <div class="div3">
    Text about flowers
  </div>
</div>

推荐答案

div.div1 {
  display: flex;            /* 1 */
  padding: 10px;
  overflow: auto;
  background-color: yellow;
  border: 1px solid black;
}

div.div2 {
  order: 1;                 /* 2 */
  border: 1px solid gray;
}

div.div3 {
  flex: 1;                  /* 3 */
  margin-right: 10px;
  padding: 10px;
  /* height: 100%  */       /* 4 */
  background-color: orange;
  border: 1px solid gray;
}

img {
  vertical-align: bottom;   /* 5 */
}

<div class="div1">
  <div class="div2">
    <img src="http://splendidwillow.com/wp-content/uploads/2012/04/Allium-Purple-garlic-flowers-200x200.jpg">
  </div>
  <div class="div3">
    Text about flowers
  </div>
</div>

注意:

1. 建立伸缩容器.默认情况下，子级将以相同的高度( align-items:Stretch )排成一行( flex-direction:row ).
2. 使图像最后出现在视觉显示中(所有弹性项目的默认 order 值为 0 )
3. 使橙色框占用该行中的所有可用空间.
4. 删除弹性项目上定义的高度.它们将覆盖 align-items 等高功能.
5. 图像标签下方的神秘空白空间

1. Establish flex container. By default, children will line-up in a row (flex-direction: row) with equal height (align-items: stretch).
2. Make image appear last in visual display (default order value for all flex items is 0)
3. Make orange box consume all available space in the row.
4. Remove defined heights on flex items. They will override align-items equal height feature.
5. Mystery white space underneath image tag

这篇关于CSS-div扩展高度以匹配同级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！