【发布时间】：2021-03-30 19:47:46
【问题描述】：
我有一个标题组件，其左侧有标题，页面右侧有一些链接。这些 div 的大小和位置（部分）具有响应性，当我调整窗口大小时，我对它们移动的方式感到满意。但是，我希望左 div 充当其他 div 的墙。就像当我将窗口大小调整到非常小的时候，链接将“点击”标题，然后才开始换行成多行。我该怎么做？
<html>
<head>
<style>
.body {
position: fixed;
top: 0;
background-color: lightgoldenrodyellow;
box-sizing: border-box;
width: 100vw;
height: calc(2% + 75px);
z-index: 10000;
}
.titleContainer {
position: fixed;
left: 0;
display: flex;
align-items: center;
font-size: calc(18px + 0.5vw);
width: 250px;
min-width: 200px;
height: calc(2% + 75px);
transition: 0.3s;
margin-left: 10px;
}
.titleContainer:hover{
cursor: pointer;
}
#title {
margin-right: auto;
padding-left: 5px;
text-decoration: none;
font-size: 32px;
font-weight: 750;
font-family: Arial, Helvetica, sans-serif;
}
.pageLinkContainer {
position: fixed;
right: 0;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: calc(2% + 75px);
width: auto;
}
.pageLink {
margin-right: 10px;
margin-left: 2px;
font-size: calc(12px + 0.3vw);
}
</style>
</head>
<body>
<div className="titleContainer">
<h3><Link id="title" to="/" >TITLE</Link></h3>
</div>
<div className="pageLinkContainer">
<Link className="pageLink" to="/upload">Upload a funny Gif</Link>
<Link className="pageLink" to="/gifs"> Look at funny Gifs</Link>
<Link className="pageLink" to="/database">Database</Link>
</div>
</body>
</html>编辑#3：
根据下面Niwo的回答，这是我目前的css。我使用样式化组件创建一个主体作为组件周围的包装器。我试图尽可能清楚地解释页面的流程。我的另一个想法是使用window.innerWidth 在调整窗口大小时使链接消失。
我已将此 CSS 更新为有效的答案，供任何想知道的人使用。我还添加了我的样式化组件（我删除了这些组件是为了从中删除 React）。当然，所有的功劳都归于Niwo。
CSS
//GLOBAL STYLE
const GlobalStyle = createGlobalStyle`
body {
margin: 0;
padding: 0;
background-color: rgba(0,0,50,0.3);
height: 100%;
width: 100%;
position: absolute;
}
`
//GLOBAL CONTAINER
//A WRAPPER-DIV AROUND ALL COMPONENTS
const GlobalContainer = styled.div`
{
height: 100%;
width: 100%;
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
`
//HEADER COMPONENT
//ANOTHER WRAPPER-DIV JUST FOR THIS COMPONENT
const HeaderStyle = styled.div`
{
position: fixed;
top: 0;
display: flex;
justify-content: space-between;
background-color: rgba(100,200,100,0.6);
width: 100vw;
height: calc(2% + 75px);
z-index: 10000;
}
.titleContainer {
display: flex;
flex-shrink: 0;
align-items: center;
font-size: calc(18px + 0.5vw);
width: 250px;
transition: 0.3s;
margin-left: 10px;
}
.titleContainer:hover{
cursor: pointer;
}
#title {
text-decoration: none;
font-size: 32px;
font-weight: 750;
font-family: Arial, Helvetica, sans-serif;
}
.pageLinkContainer {
right: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: calc(2% + 75px);
}
.pageLink {
white-space: nowrap;
margin: 0 0.5rem;
font-size: calc(12px + 0.3vw);
}
`
HTML
<GlobalStyle />
<GlobalContainer>
<HeaderStyle>
<div className="titleContainer">
<h3><Link id="title" to="/" >Movie Scores</Link></h3>
</div>
<div className="pageLinkContainer">
<Link className="pageLink" to="/upload">Upload a funny Gif</Link>
<Link className="pageLink" to="/gifs"> Look at funny Gifs</Link>
<Link className="pageLink" to="/database">Movies We've Seen</Link>
</div>
</HeaderStyle>
</GlobalContainer>
【问题讨论】：
标签： javascript html css reactjs styled-components