Question

COPY package*.json ./
RUN npm install

我的父div <div id=“maincontainer”> <div>Some data</div> <div id = "imagecontainer"> My image is here</div> <div id = “button-row”> <button id=“imagebutton” class="selected" type="button">Image</button> <button id=“videobutton” type="button">Video</button> </div> </div>具有固定的高度-#maincontainer和宽度。固定高度可能不是一个好习惯，但是，这是我解决另一个问题所必需的。

如何使所有子元素都适合此容器？

在将大小设置为200 px之前，所有子元素都很好地适合200 px。但是，在设置了固定高度之后，我可以看到#maincontainer和#imagecontainer溢出了我的父容器。

我需要为所有子元素设置高度吗？

如果我的主容器中有多个嵌套的子容器怎么办？

Answer 1

很容易，我们可以将所有内部元素固定在主div下。

第一步是：在外部div中添加位置相关属性。

第二步是：在要固定的每个内部div（元素）中添加绝对位置。

Answer 2

您可以将其设置为flex容器；

.maincontainer{
  display: flex;
  flex-flow: column nowrap;
}

然后根据要收缩以适合的三个div调整其内部的flex-shrink。

例如，也许您希望所有图像都具有相同大小。如果是这样，您可以这样做：

.img-container{
  flex: 0 0 75px;
}
.img-container img{
  height: 100%;
}

但第一个div缩小以适合：

.some-data-div{
  flex: 1 1 auto;
}

您内部的嵌套div也可以制作flex容器，具体取决于它们是什么以及它们包含什么。您还可以将整个事情变成一个CSS网格。如果要创建一个已定义的空间（而不是让它流到所需的空间），则可能需要定义如何精确地使用有限的空间。因此，是的，您可能必须定义几个元素的高度或最大高度。

div中具有固定高度的多个嵌套元素

2 个答案: