html - 将按钮移动到元素的底部

Question

我正在使用 Material UI 创建带有参数 Actions 的卡片，这是一个按钮列表。

Card 的长度是相对于我输入的文本而言的，但是所有的 Cards 都会有相同的高度。

我是 CSS 的新手，仍然在思考位置:固定、相对、绝对。

这是呈现卡片的代码:

export function ViewCurrentPitches2(props) {
    const actions = [
        <FlatButton
        label="Cancel"
        primary={true}
        onClick={props.closeEditPitch}
      />,
      <FlatButton
        label="Save"
        primary={true}
        keyboardFocused={true}
        onClick={props.savePitchBeingEdited}
      />,
    ];

    return (
        props.state.savedPitches.map((pitch, i) => {
            return(
                <Card key={pitch.id} className = 'form-margin card-width' zDepth={3}>
                    <CardText>{pitch.subject} </CardText>
                    <CardText className='card'>{pitch.pitch}</CardText>
                    <CardActions>
                        <FlatButton label="Edit" onClick={(e) => {props.toggleEdit(e, pitch); console.log(props.state.pitchBeingEdited)}}/>
                            <Dialog
                                className="dialogBox"
                                title="Test"
                                modal={false}
                                actions={actions}
                                open={props.state.editPitch}
                                contentStyle={customContentStyle}
                                autoScrollBodyContent={true}
                            >
                                <TextFieldExampleCustomize currentValue = {props.state.pitchBeingEdited} updateNewPitch = {props.updatePitchBeingEdited} />
                            </Dialog>

                        <FlatButton label="Delete" onClick={(e) => {props.deletePitch(e, pitch)}} />
                    </CardActions>
                </Card>
            )

        })
    )
}

<div className='card-parent'>
    <ViewCurrentPitches2
        state= {this.state}
        deletePitch = {this.deletePitch}
        handleSave={this.dialogBoxSave}
        toggleEdit = {this.toggleEdit}
        closeEditPitch = {this.closeEditPitch}
        updatePitchBeingEdited = {this.updatePitchBeingEdited}
        savePitchBeingEdited = {this.savePitchBeingEdited}
    />
</div>

这是它的样子:

谁能给我解释一下

1.) 当我添加 CSS position: relative |固定 | absolute ...等发生了什么事？我把它分配给 child ，对吗？

2.) 如果我想将按钮移动到 Card 的底部，Card 是父级并且我将样式放在按钮上？我该怎么做呢？

Answer 1

一般来说，您会将relative 分配给父级，将absolute 分配给子级。子项相对于父项绝对定位。

引用full documentation了解更多详情。

.card{
  display:inline-block;
  width:200px;
  height: 100px;
  border: 1px solid red;
  position: relative;
}

.buttons{
  position: absolute;
  bottom: 0;
  border: 1px solid blue;
  width: 100%;
}

<div class="parent">
  <div class="card">
    <div class="buttons">
      <button>Edit</button>
      <button>Delete</button>
    </div>
  </div>
  <div class="card">
    <div class="buttons">
      <button>Edit</button>
      <button>Delete</button>
    </div>
  </div>
  <div class="card">
    <div class="buttons">
      <button>Edit</button>
      <button>Delete</button>
    </div>
  </div>
<div>