Блог

У меня есть react.js проект, и все работает правильно, но когда я удаляю компоненты в промежуточной области, боковая панель слева и справа перемещается в промежуточную область. Я хочу прикрепить боковые панели слева и справа, даже если я удаляю компоненты ленты посередине. Любая идея будет оценена по достоинству.

Скриншот1:

Скриншот2:

Widgets.js:

    import React from 'react';
import './Widgets.css'; 
import InfoIcon from '@material-ui/icons/Info';
import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';

function Widgets() {
    const newsArticle = (heading, subtitle) => (
<div class="widgets__article">
<div class="widgets__articleLeft">
 <FiberManualRecordIcon/>
</div>
<div class="widgets__articleRight">
    <h4>{heading}</h4>
    <p>{subtitle}</p>
</div>
</div>
    )
    return (
        <div className= 'widgets'>
<div class="widgets__header">
    <h2>LinkedIn News</h2>
    <InfoIcon/>
</div>
{newsArticle("Nesim11 react clone", "Top news - 9099 readers")}
{newsArticle("The Six Morning Habits of High Performers", "How to Be Awesome at Your Job")}
{newsArticle("Unconscious Bias", "Stacey Gordon")}
{newsArticle("Nesim11 react clone", "Top news - 9099 readers")}
{newsArticle("The Six Morning Habits of High Performers", "How to Be Awesome at Your Job")}
{newsArticle("Unconscious Bias", "Stacey Gordon")}
</div>
    );
}

export default Widgets
 

Виджеты.css:

   .widgets {
    position: sticky;
    top: 80px;
    flex:0.2;
    background-color: white;
    border-radius: 10px;
    border: 1px solid lightgray;
    height: fit-content;
    padding-bottom: 10px;
}
.widgets__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    
}
.widgets__header > h2 {
    font-size: 16px;
    font-weight:400;
}
.widgets__article{
    display: flex;
    padding:10px; 
    cursor: pointer;
}
.widgets__article:hover{
    background-color:whitesmoke;
}
.widgets__articleLeft{
    color: #0177b7;
    margin-right: 5px;
}
.widgets__articleLeft > .MuiSvgIcon-root {
    font-size: 15px;
}
.widgets__articleRight{
    flex: 1;
}
.widgets__articleRight > h4 {
    font-size: 14px;
}
.widgets__articleRight > p {
    font-size: 12px;
    color:grey;
}
 

Я бы предложил использовать justify-content в вашем элементе контейнера и установить его в пространстве между ними. Вы можете попробовать некоторые другие и посмотреть, что вам больше всего нравится.

Вот краткий пример:

 .container {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.box {
  width: 100px;
  height: 100px;
}

.one {
  background: blue;
}

.two {
  background: red;
}

.three {
  background: yellow;
}
 

https://jsfiddle.net/fm05h2dq/