動的に成長するリストに対するdivの移動CSS

Question

すべてのテキストフィールドがあり、最後に「保存」と「cancle」ボタンがあります。この最後のテキストフィールドとボタンの間には、ファイルをアップロードするときに動的に入力されるファイル名リストがあります。同じもののスクリーンショットはここに添付されています。このリストのサイズは固定されていないので、追加されたファイルごとにこれらのボタンを下に移動します。私はどのように私は動的にボタンのこの動きを調整することができますか分からない。 [画像1参照]。私の現在のCSSコードは次のとおりです。

// Outermost div 
.div-one { 
    position: absolute; 
    background-color: gainsboro; 
    height: 100%; 
    width: 50%; 
} 

// div for file list 
.item-list { 
    width: 16em; 
    position: relative; 
    margin-left: -38px; 
} 

// div for buttons 
.save-cancel-buttons-div{ 
    position: relative; 
    top: 20%; 
} 

後、私のHTMLコードです：

<div className="div-one1"> 
<Row> 
    <div className="item-list"> 
    <Col xs={6} sm={6} md={6} lg={6}> 
     <If condition={this.state.files && this.state.files.length!=0}> 
     <ul style={{listStyle: 'None', fontSize: '16px'}}> 
      {this.state.files.map((value, index) => (
      <li style={{paddingBottom: '5px', border:'5px'}} 
       key={`item-${index}`} > 
       <span>{value.file_name} 
       <span style={{paddingLeft: '20px'}} 
         onClick={() => this.onDeleteItem(value, index)}> 
        <Close size={20} paddingLeft={20}></Close> 
       </span> 
       </span> 
      </li> 
      ))} 
     </ul> 
     </If> 
    </Col> 
    </div> 
</Row> 
<div className="save-cancel-buttons-div"> 
    <Row> 
    <Col xs={3} sm={3} md={2} lg={2}> 
    </Col> 
    <Col xs={6} sm={6} md={6} lg={6}> 

     <Row> 
     <Col xs={6} sm={6} md={6} lg={6}> 
      <Button 
      value={<FormattedMessage id="saveBtn" defaultMessage="speichern" />} 
      fontSize={14} 
      minHeight={33} 
      minWidth={150} 
      backgroundColor="blue" 
      onClick={this.createNewDelivery}/> 
     </Col> 
     <Col xs={6} sm={6} md={6} lg={6}> 
      <Button 
      value={<FormattedMessage id="cancelBtn" defaultMessage="Zurück" />} 
      fontSize={14} 
      minHeight={33} 
      minWidth={150} 
      backgroundColor="red" 
      onClick={this.goBackToOfferedDeliveries} 
      /> 
     </Col> 
     </Row> 
     <Col xs={3} sm={3} md={2} lg={2}> 
     </Col> 
     <Col xs={6} sm={6} md={6} lg={6}> 
     </Col> 
    </Col> 
    </Row><br/> 
</div> 
</div> 

Answer 1

はsave-cancel-buttons-divのために新しいコンテナのdivを追加してください。 item-listとcontainer divを親コンテナのdiv-oneに相対的に配置します。最後に、save-cancel-buttons-divをそのコンテナに相対的に配置し、margin-left-right:autoを追加して親div内に配置します。

// div for file list 
.item-list 
{ 
    position: relative; <--- this as first line of code 
    float:left;   <--- add this so it takes a definite position 
    width: 16em; 
    margin-left: -38px; 
} 

// Put .save-cancel-buttons-div inside this div 
.containerForSaveCancel 
{ 
    position:relative; 
    float:left; 
    width:100%; 
    text-align:center; 
    margin:0; 
    padding:0; 
} 


// div for buttons 
.save-cancel-buttons-div 
{ 
    position: relative; 
    margin:5px auto 0 auto; <--- add this to center the div inside its parent 
}