反应浮动左的HTML不起作用答案

【问题标题】：Html in react float-left is not working反应浮动左的HTML不起作用
【发布时间】：2017-06-20 06:16:13
【问题描述】：

float:right 在 html 中不起作用，我在其他重复项上尝试了所有其他解决方案，但仍然无法正常工作：

    export default props => (
      <div className="App" style={{float:'left'}}>
        <div className="Task" style={{overflow:'hidden',float:'left'}}>                                                                                                                                                                                                    
          <div className="container">
            <div className="info">
              <div className='project'>{props.project.name}</div>
              <div className='user-fname'>{props.user.first_name}</div>
            </div>
            <div className={'status '+props.status}>{props.status}</div>
            <div>
              <div>estimated:    {props.estimated_time_hours+' : '+props.estimated_time_minutes}</div>
              <Circle
                percent={getEstimation(props.estimated_time_hours, props.estimated_time_minutes, props.total_spent_time)}
                strokeWidth="6"
                style={{height:60}}
                trailWidth="4"
                trailColor="#D3D3D3"
                strokeColor={getColorEstimation(props.estimated_time_hours, props.estimated_time_minutes, props.total_spent_time)}
              />
              <div>spent:         {Math.floor(props.total_spent_time/3600)+' : '+Math.floor((props.total_spent_time%3600)/60)}</div>
            </div>
            <div className={'status'}>
            </div>
          </div>
          <div className={'line'}>
            <Line
              percent={props.progress}
              className={'line'}
              strokeWidth="2"
              trailWidth="1"
              trailColor="#D3D3D3"
              strokeColor="green"/>
          </div>
          <button
            type="submit"
            className="btn btn-default"
            onClick={()=>this.props.onSubmit(this.state.id)}>Validate</button>

          <div style={{flex:1, padding:0, height:10}} className="progress-line progress">
            <div className="progress-bar progress-bar-success active"
              role="progressbar"
              aria-valuenow="45"
              aria-valuemin="0"
              style={{padding:0, maring:0, width: window.innerWidth/2}}
              aria-valuemax="100">
              <span className="sr-only">45% Complete</span>
            </div>
          </div>

        </div>
      </div>
    );

.Task {
  text-align: center;
  color:skyblue;
  float: left;
  width:100%;
  margin-bottom:80px;
  overflow:hidden;                                                                                                                                                                                                                                                     
}
.container {
  margin:0 auto;
  width:100%;
  float: left;
}
.App {
  text-align: center;                                                                                                                                                                                                                                                  
}

是否有任何简单的文档可以清楚地解释 html 如何呈现其元素的行为...？

【问题讨论】：

HTML 输出是什么样的？可以发一下吗？
@ObsidianAge 刚刚上传了它
从您的问题中不清楚您具体希望浮动什么，以及什么没有浮动，因为您的屏幕截图是一个没有浮动的元素。你的标题也说左，但你的问题说右。你能更具体地介绍所有这些事情吗？
所以你看到了虚拟名称和另一个虚拟名称，以及暂停的标签，估计它们是垂直对齐的，我想将它们水平对齐，我尝试放置 justify-content 和对齐和浮动以及我在谷歌上找到的所有东西，元素和它们的父母......几乎每一个元素，我尝试了很多组合，甚至不记得了，它们从未改变过，像岩石一样垂直排列......任何方式我最终使用了引导程序，col-xs-....它们现在已修复（仅使用引导程序）...

标签： html css reactjs browser

【解决方案1】：

我遇到过类似的问题。我已修复添加到容器父 css：

display: flex;

Flexbox 了解更多信息

【讨论】：