动态宽度框的CSS问题

Question

我的布局如下所示

<div style="display: inline-block">
    <div id="fieldDiv" style="box-sizing: border-box; position: relative">Div with dynamic width (Has field with label/textbox)</div>
    <div id="errorDiv" style="box-sizing: border-box;">div with dynamic error message (Shows error for the field)</div>
</div>

现在，我希望始终在“ fieldDiv”下方（即带有标签/文本框的位置）正下方显示/开始“ errorDiv”

仅当“ fieldDiv”的宽度大于某个值时才会发生这种情况，在这种情况下，errorDiv文本将在新行上呈现。 但是，如果“ fieldDiv”的宽度小于某个值，则errorDiv文本不会从下一行开始，而是在fieldDiv之后立即开始

如何解决此问题（假设这些div是动态布局的一部分）？

Answer 1

为父级div尝试flex：

#ParentDiv{

display:flex;
flex-direction:column;
justify-content:flex-end;
}

注意：您必须指定childDiv的宽度。