javascript - CSS样式，如何使此按钮停留在右侧并保持响应

一旦有人添加评论，评论按钮就会出现（ala medium.com）。包含文本的p标签位于引导容器内，该容器位于页面中间。我想将我的评论按钮保留在该p段落的右侧。

这是我目前拥有的屏幕截图。


当我缩小页面时，按钮会向左滑动，最终一直到屏幕的左侧。当涉及绝对和相对定位时，我会感到有些困惑，因为我没有做太多工作。我希望你们可以在这里指导我。

我的最终目标是即使用户在水平缩小页面时也将注释按钮保持在p标签（段落）的右侧。如果按钮必须变小，那就可以了。

这是html和CSS：

html, body {
    background-color: whitesmoke;
    height: 100%;
}

.headLine {
    text-align: center;
}

.highLight {
    background-color: yellow
}

.editable {
    position: relative;
}

.toolTip {
    position: absolute;
    background-color: black;
    min-width: 180px;
    max-width: 180px;
    border-radius: 10px;
    color: white
}

.buttons {
    margin-top: 0.3%;
    color: black;
    background-color: #7D98ED;
    border-radius: 5px;
}

.commentBox {
    position: absolute;
    border-radius: 10px;
    background-color: beige;
    height: 200px;
    width: 300px;
}

.textAreaBox {
    width: 270px;
    height: 100px;
}

.buttonCommentSubmit {
    text-align: center;
    position: absolute;
    bottom: 10px;
    right: 135px;
}

.sideComment {
    position: absolute;
    right: 300px;
    top: 125px;
}

.sideCommentView {
    position: absolute;
    left: 69.5%;
    top: 15.7%;
    background-color: beige;
    min-width: 300px;
    max-width: 300px;
    border-radius: 10px;
}

.mainTextBody {
    min-height: 100vh;
    background-color: mintcream;
}

.reinsertedText {
    display:inline;
}

<div className = "container mainTextBody" onMouseDown={this.removetoolBox.bind(this)} onMouseUpCapture={this.captureSelection.bind(this)}>
    <h1 className = "headLine" >Medium Markup</h1>
        <hr />
           <p className='editable'>All the text here....</p>
          {(this.state.showSideComments) ? <SideComments /> : ''}
</div>

<div className="sideComment">
   <button id="sideButton" onClick={this.showComments}>Comments</button>
</div>

编辑：有关更多信息和html，这是github组件的链接：

https://github.com/milosbunijevac/medRails/tree/master/app/javascript/packs

以及样式表：

https://github.com/milosbunijevac/medRails/blob/master/app/assets/stylesheets/main_control.scss

我在此示例中真正使用的唯一组件是Main.jsx和SideComments.jsx

最佳答案

我有3条建议，将按钮保持在p标签的右侧。但我需要添加一个div来包装2个div。

显示：行内块+空格：nowrap

html, body {
    background-color: whitesmoke;
    height: 100%;
}

.headLine {
    text-align: center;
}

.highLight {
    background-color: yellow
}

.editable {
    position: relative;
}

.toolTip {
    position: absolute;
    background-color: black;
    min-width: 180px;
    max-width: 180px;
    border-radius: 10px;
    color: white
}

.buttons {
    margin-top: 0.3%;
    color: black;
    background-color: #7D98ED;
    border-radius: 5px;
}

.commentBox {
    position: absolute;
    border-radius: 10px;
    background-color: beige;
    height: 200px;
    width: 300px;
}

.textAreaBox {
    width: 270px;
    height: 100px;
}

.buttonCommentSubmit {
    text-align: center;
    position: absolute;
    bottom: 10px;
    right: 135px;
}

.sideComment {
    position: absolute;
    right: 300px;
    top: 125px;
}

.sideCommentView {
    position: absolute;
    left: 69.5%;
    top: 15.7%;
    background-color: beige;
    min-width: 300px;
    max-width: 300px;
    border-radius: 10px;
}

.mainTextBody {
    min-height: 100vh;
    background-color: mintcream;
}

.reinsertedText {
    display:inline;
}

.wrapContainer {
    white-space: nowrap;
}
.wrapContainer>div {
    display: inline-block;
}

<div class="wrapContainer">
    <div className = "container mainTextBody" onMouseDown={this.removetoolBox.bind(this)} onMouseUpCapture={this.captureSelection.bind(this)}>
        <h1 className = "headLine" >Medium Markup</h1>
            <hr />
               <p className='editable'>All the text here....</p>
          {(this.state.showSideComments) ? <SideComments /> : ''}
    </div>

    <div className="sideComment">
       <button id="sideButton" onClick={this.showComments}>Comments</button>
    </div>
</div>

显示：flex

html, body {
    background-color: whitesmoke;
    height: 100%;
}

.headLine {
    text-align: center;
}

.highLight {
    background-color: yellow
}

.editable {
    position: relative;
}

.toolTip {
    position: absolute;
    background-color: black;
    min-width: 180px;
    max-width: 180px;
    border-radius: 10px;
    color: white
}

.buttons {
    margin-top: 0.3%;
    color: black;
    background-color: #7D98ED;
    border-radius: 5px;
}

.commentBox {
    position: absolute;
    border-radius: 10px;
    background-color: beige;
    height: 200px;
    width: 300px;
}

.textAreaBox {
    width: 270px;
    height: 100px;
}

.buttonCommentSubmit {
    text-align: center;
    position: absolute;
    bottom: 10px;
    right: 135px;
}

.sideComment {
    position: absolute;
    right: 300px;
    top: 125px;
}

.sideCommentView {
    position: absolute;
    left: 69.5%;
    top: 15.7%;
    background-color: beige;
    min-width: 300px;
    max-width: 300px;
    border-radius: 10px;
}

.mainTextBody {
    min-height: 100vh;
    background-color: mintcream;
}

.reinsertedText {
    display:inline;
}

.wrapContainer {
    display: flex;
    flex-flow: row nowrap;
}
.wrapContainer>div {
    flex: 1;
}
.wrapContainer>div + div {
    flex: 0;
}

<div class="wrapContainer">
    <div className = "container mainTextBody" onMouseDown={this.removetoolBox.bind(this)} onMouseUpCapture={this.captureSelection.bind(this)}>
        <h1 className = "headLine" >Medium Markup</h1>
            <hr />
               <p className='editable'>All the text here....</p>
          {(this.state.showSideComments) ? <SideComments /> : ''}
    </div>

    <div className="sideComment">
       <button id="sideButton" onClick={this.showComments}>Comments</button>
    </div>
</div>

您可以更改边距和头寸，但这可能超出了您的主要问题。