React float-left 中的 Html 不起作用

Question

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 如何呈现其元素的行为......？

Answer 1

我遇到过类似的问题。我已经修复了添加到容器父 css 的问题: display: flex; Flexbox了解更多信息