reactjs - 为什么侧边栏在 React.js 的左侧和右侧没有粘性或固定?
问题描述
我有一个 react.js 项目,一切正常,但是当我删除中间的组件时,左右侧边栏移动到中间。我想在左右两侧粘贴侧边栏,即使我删除了中间的提要组件。任何想法将不胜感激。
截图1:
截图2:
小部件.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;
}
推荐阅读
- python - Python中字典函数中的局部变量
- python - Flask - RuntimeError:在应用程序上下文之外工作
- docker - 启动dotdocker时出现代理服务器错误
- aws-lambda - 在缓存授权方响应时获取 403
- c - printf 的速度如何受分叉进程和“\n”的影响?
- laravel - nuxtServerInit 与 Vuex 导致无限循环 laravel 和 nuxtjs
- opengl - OpenGL模糊
- python - Plotly-Dash:如何基于两个不同的数据框创建图形?
- python - 数据作为一个文本出来,我想将数据分为课程名称,描述等
- c++ - 为什么这段代码占用这么多内存?