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

Question

一旦有人添加评论，评论按钮就会出现（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

Answer 1

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

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