<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>
我的父div #maincontainer具有固定的高度-200像素和宽度.
固定高度可能不是一个好习惯,但是,这对于我解决另一个问题是必需的.
如何使所有子元素都适合此容器？
在将尺寸设置为200 px之前,所有子元素都已很好地适合#maincontainer.但是,在设置了固定高度之后,我可以看到我的#imagecontainer和#button-row溢出了我的父容器.
我需要为所有子元素设置高度吗？
如果我的主容器中有多个嵌套子容器,该怎么办？
最佳答案
您可以将其设置为flex容器；
.maincontainer{
display: flex;
flex-flow: column nowrap;
}
然后根据要缩小以适合的三个div调整其内部的div.
例如,也许您希望所有图像都具有相同的大小.如果是这样,您可以执行以下操作：
.img-container{
flex: 0 0 75px;
}
.img-container img{
height: 100%;
}
但是第一个div缩小以适合：
.some-data-div{
flex: 1 1 auto;
}
您内部的嵌套div也可以制作flex容器,具体取决于它们是什么以及它们包含什么.您还可以将整个事情变成一个CSS网格.如果要创建一个已定义的空间(而不是让它流到所需的空间),则可能需要定义如何精确地使用有限的空间.因此,是的,您可能必须定义几个元素的高度或最大高度.
