当前面的 div 调整大小时，防止 div 向下移动答案

【问题标题】：Prevent div from moving downward when preceding div resizes当前面的 div 调整大小时，防止 div 向下移动
【发布时间】：2017-04-28 00:07:55
【问题描述】：

我有一个基本的电子邮件捕获表单，但我不知道在显示错误消息时阻止“提交”按钮移动的 CSS：http://imgur.com/RbXLN6l

我正在使用 React.js 构建它，并尝试使用 flexboxes，沿顶部对齐列的内容。这是我的组件中的 html sn-p，我使用 material-ui 作为文本字段和提交按钮：

 <div className='row'>
   <form className='registration' onSubmit={this.handleSubmit}>
     <div className='column'>
       { !this.props.registered && 
        <TextField
         hintText='example@domain.com' 
         errorText={this.props.errorText}
         value={this.props.email} 
         onChange={this.handleChange}
         onKeyDown={this.handleKeyDown}
       /> }   
     </div>
     <div className='column'>
       { this.props.verifying &&
        <CircularProgress 
          size={25} 
          visible={this.props.verifying} 
          color={grey500} 
        /> }
       { !this.props.verifying && !this.props.registered &&              
        <RaisedButton type='submit' label='Submit'
       /> }
     </div>
   </form>
   <style jsx>{`
     .row {
       display: flex;
     }
     .column {
       flex: 1;
       padding: 1rem;
       display: inline;
       vertical-align: top;
     }
  `}</style>
 </div>

以下是渲染标记的截图：https://imgur.com/a/zx19v。似乎列 div 位于正确的位置，但呈现的标记仍在向下滑动。

非常感谢任何帮助！

【问题讨论】：

如果我们无法重现问题，则很难调试。在这一点上主要是猜测。看看能不能提供现场演示。

标签： css reactjs flexbox

【解决方案1】：

确保按钮在另一个 div 中，然后只是 float: left 两个容器，您可以看到一个实时示例 here，另一种选择是将它们设为 display : inline-box 和 vertical-align: top

这两种方式都会在两个容器上为您提供独立的行为

【讨论】：