当内联块不再适合时，如何使 div 与其子项一起成长

Question

所以我有这个代码

        <div class="contentBlock">
            <div id="profileBlock">
                <div id="imageContainer"></div>
                <div id="textBlock">                
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>  
            </div>
        </div>

css

.contentBlock
{
    display: inline-block;
    width: 100%;
    height: 100%;
}

#profileBlock
{
    text-align: center;
    margin: 25px 25px;
    height: 350px;
}

#textBlock
{
    width: 50%;
    display: inline-block;
    margin: 0px 25px;
}

#imageContainer
{
    vertical-align: top;
    display: inline-block;
    width: 250px;
    height: 300px;
    background-image: url('http://placehold.it/250x300');
    background-repeat: no-repeat;
}

https://jsfiddle.net/h21f2882/

它基本上是我投资组合网站的一部分。我试图将占位符图片放在我的文本旁边。但是，当我调整浏览器大小时，文本会出现在图片下方，这不是我要解决的问题。然而，问题是容器无法缩放。允许整个 textBlock div 溢出它的边界。

现在我有两个问题：

如果我要进行媒体查询，我会将显示更改回块并将 profileBlock 的大小调整为 X 像素。这会是不好的做法吗，因为我会使用幻数来设置高度？
发生这种情况后，如何更改此容器的高度以适合其子项？

感谢转发马克斯·比克曼斯

Answer 1

你快到了。您只需要添加两行代码：

html, body { height: 100%; }

由于您在 .contentBlock 中使用百分比高度，因此您需要在父元素上指定高度 – 在本例中为 body 和 html。如果没有此代码，.contentBlock 中的 height: 100% 将不会执行任何操作。

有关在 CSS 中使用百分比高度的解释，请在此处查看我的回答：
#profileBlock { min-height: 350px; }

您已经为图像和文本 (#profileBlock { height: 350px; }) 容器设置了 固定高度 。这会将高度锁定到位。相反，将其设为 minimum height。当内容增加时它会扩展。

并考虑在 .contentBlock 上设置 min-height。然后它将扩展以容纳 .profileBlock.

演示版：https://jsfiddle.net/h21f2882/2/

当内联块不再适合时，如何使 div 与其子项一起成长

How to make a div grow with its children when inline-blocks don't fit anymore

html

css

scaling

media-queries

responsiveness