html - 具有 div 边界的文本 "spill out"

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 并伴随帮助文本容器，如果没有帮助可用，这些容器将留空。