使文本“溢出”到div边界之外

Question

我正在使自己成为一个图书馆，以帮助我更快地注册表格。我一直在使用的格式是左侧的某个表单字段（在50％宽的div单元格中），右侧有帮助文本（在50％的div单元格中）（如果有帮助文本）。一次完成一次“表单行”，因此我不能将两个表单字段放入完成的div单元中，以使内容很好地对齐。视觉辅助图像：https://imgur.com/a/aKp50VF

我试图弄清楚，如何在帮助文本的右侧“溢出”到下一个“表单行”（如果更长），以便使所有内容保持格式正确。

<div id='form_container'>

    <div id='left_form_container'>
        Form field here as needed       
    </div>

    <div id='right_form_container'> 
        Help text if any
    </div>

</div>

CSS看起来像这样

#form_container {
    overflow:hidden;
    margin-top:10px;
    }

#left_form_container {
    width:48%;
    float:left;
    padding-right:15px;
    overflow:hidden;
    }

#right_form_container {
    width:48%;
    float:left;
    padding-left:15px;
    overflow:hidden;
    }

谢谢！

Answer 1

您可以创建一个CSS Grid template，然后确保您的帮助文本和输入字段共享同一行。或使用Flexbox将单个容器分成多个Div，并在没有可用帮助的情况下将帮助文本容器留空。