Проблема с выравниванием тегов html - PullRequest
0 голосов
/ 30 мая 2020

Я новичок в html, css и не могу понять, как выровнять, например, элемент диапазона комментариев в нижнем левом углу родительского div и поделиться снизу в правом нижнем углу. и сделайте элемент p посередине родительского div. Я прикрепил коды css и html. помогите пожалуйста

React Code

 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 code

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;
}

1 Ответ

1 голос
/ 30 мая 2020

Вы можете заключить как лайки, так и комментарии в один <div> и разделить диапазон в другом div и предоставить float: right для последнего div.

   <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> в center используйте определенную ширину и поле: "0 auto".

 <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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...