Question

我是html，css的新手，无法弄清楚如何将comment span元素对齐到父div的左下角，并共享底部到右下角。并将p元素放在父div的中间。我已经附上了CSS和HTML代码。请帮助

反应码

 render() {
        return (
            <div className="container-fluid">
                <div className="row justify-content-center">
                    <div className="post-holder shadow-sm p-3 mb-5 bg-white rounded">
                        <h4>I am a data scientist and yes, you did r</h4>
                        <div className='m-2'>
                        <span className="username ">@username</span>
                        <span className="postdate float-right">1 Day ago</span>
                        </div>

                        <p className="align-self-center">
                        But the truth is that data scientists typically “spend 1–2 hours a week looking for a new job” as stated in this article by the Financial Times. Furthermore, the article also states that “Machine learning specialists topped its list of deve
                        </p>
                        <div className ="post-actions">
                        <span className="fa fa-heart fa-lg post-like"> 299</span>
                        <span className="fa fa-comment fa-lg post-comment"> 299</span>
                        <span className="fa fa-share fa-lg post-share"> 299</span>
                        </div>

                    </div>

                </div>
            </div>
        );
    }

css代码

body {
  background-color: #fdfdfd;
}

.post-holder {
  width: 400px;
  height: 400px;
  margin: 0px 10px;
  position: relative;
}
.username {
  font-size: 16px;
  color: #899bb4;
}

.post-actions {
  position: absolute;
  bottom: 2rem;
}

.post-share {
  right: 2rem;
}

Answer 1

您可以在一个<div>内同时包含点赞和注释范围，并在另一个div中共享范围，并向后一个div提供float：right。

   <div className="post-actions">
    <div>
      <span className="fa fa-heart fa-lg post-like"> 299</span>
      <span className="fa fa-comment fa-lg post-comment"> 299</span>
    </div>
    <div style={{ "float": "right" }}>
       <span className="fa fa-share fa-lg post-share"> 299</span>
    </div>
   </div>

要使<p>居中，请使用一定的宽度和边距：“ 0自动”。

 <p className="align-self-center" style={{width:"50%",margin:"0 auto"}}>
   But the truth is that data scientists typically “spend 1–2 hours a week looking for a new job” as stated in this article by the Financial Times. Furthermore, the article also states that “Machine learning specialists topped its list of deve
 </p>

html标签对齐问题

1 个答案: