Question

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

卡片的长度是相对于我输入的文字，但所有卡片的高度都相同。

我是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 | fixed | absolute ...等时发生了什么？我把它分配给孩子正确吗？

2。）如果我想将按钮移动到Card的底部，Card是父母，我将样式放在按钮上？我该怎么做呢？

Answer 1

一般来说，您可以将relative分配给父级，将absolute分配给子级。相对于父母而言，孩子的定位是绝对的。

有关详细信息，请参阅full documentation。

＆＃13;

.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%;
}

＆＃13;

<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>

＆＃13;

将按钮移动到元素的底部

1 个答案: