相对于动态增长的列表CSS移动div

时间:2017-12-23 19:38:48

标签: html css

enter image description here我有一个表单,其中包含所有文本字段,最后有“保存”字样。和' 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>

1 个答案:

答案 0 :(得分:0)

尝试为save-cancel-buttons-div添加新的容器div。将item-listcontainer 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
}