CSS样式，如何使这个按钮保持在右侧并具有响应性

Question

一旦有人添加评论（ala medium.com），就会显示评论按钮。保存文本的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

Answer 1

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

display：inline-block + white-space：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>

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

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