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> 

您可以更改邊距和頭寸，但這可能超出了您的主要問題。