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

Question

评论按钮会在有人添加评论后出现(ala medium.com)。保存文本的 p 标签位于页面中间的 Bootstrap 容器内。我想将我的评论按钮保留在该 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。

显示:内联 block +空白: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>

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