Question

我试图在页面中绘制三个矩形。顶部矩形必须比其他两个小得多。您可以看到顶部矩形具有flex-grow: 1（与其他矩形相比为5）。

然而，一旦我将三个图像放在顶部矩形内部，它会变得更高，因此它变得比其他矩形更大。

如何防止顶部矩形变高？我只想要图片＆＃39;尺寸要调整到适合原始容器的大小。

我很高兴使用flexbox功能的解决方案（因为我试图学习它）。

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
  flex-flow: column wrap;
  display: flex;
}
div {
  flex-grow: 5;
  display: flex;
  border: solid;
  margin: 1em;
}
#top {
  flex-grow: 1
}

＆＃13;

<div id="top">
  <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
  <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
  <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg">
</div>

<div id="middle"></div>
<div id="bottom"></div>

＆＃13;

http://codepen.io/CrazySynthax/pen/ZBPXry

Answer 1

您的最大高度30％大于矩形初始大小。尝试为其设置固定高度或降低最大高度以匹配初始大小。在代码笔上我用max-height：20％;并获得了您正在寻找的结果，但是为了在所有显示器上保持一致，我只需将高度设置为固定百分比。例如：身高：20％。如果你不希望你的div的高度改变，也没有使用max-height的意义。

如何保持包含div元素的高度？

1 个答案: