无论图像大小如何，如何保持按钮位置答案

【问题标题】：How to maintain button location regardless of image size无论图像大小如何，如何保持按钮位置
【发布时间】：2019-08-17 12:06:02
【问题描述】：

我尝试在添加图片时修复按钮位置。
我希望按钮位置始终是水平的。

前面：反应
css 框架：semantic-ui-react

  render() {
    return (
      <Container text style={{marginTop: '3em'}}>
        <Header as="h1">{this.state.article.title}</Header>
        <this.Paragraph />
        {(this.state.article.imageNames || []).map(function(articleData, i) {
          return (
            <img
              src={`https://article-s3-jpskgc.s3-ap-northeast-1.amazonaws.com/media/${
                articleData.name
              }`}
              alt="new"
            />
          );
        })}
        {/* TODO fix button location when image exists */}
        <Button color="green" as="a" href="/">
          <Icon name="arrow left" />
          Back to Home
        </Button>
        {this.renderRedirect()}
        <Button floated="right" onClick={this.deleteArticle}>
          <Icon name="trash" />
          Delete this Article
        </Button>
      </Container>
    );
  }

完整的源代码在这里：
https://github.com/jpskgc/article/blob/master/client/src/components/Detail.tsx

在特定的图像尺寸下，按钮位置如下：

我希望按钮位置始终像这样水平：

我希望按钮位置始终是水平的。
但实际并不总是根据图像大小。

【问题讨论】：

这里可以使用flexbox
此问题已解决。谢谢。
使用纯 CSS，你也可以这样做：container { display:table; width:0; margin:auto; text-align-last:justify; } 得到这样的结果：codepen.io/gc-nomade/pen/wvwWepj

标签： html css reactjs

【解决方案1】：

正如@Arup 所建议的，此问题已由flexbox 解决。

        <Container style={{display: 'flex'}}>
          <Button color="green" as="a" href="/">
            <Icon name="arrow left" />
            Back to Home
          </Button>
          <Button floated="right" onClick={this.deleteArticle}>
            <Icon name="trash" />
            Delete this Article
          </Button>
        </Container>

【讨论】：

太棒了.. Flexbox 很不错。 :)