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

Question

添加图像后，我尝试修复按钮位置。
我希望按钮位置始终保持水平。

front：React
CSS框架：语义UI响应

  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

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

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

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

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