仅在窗口调整大小时防止 div 重叠（带样式组件）
Posted
技术标签:
【中文标题】仅在窗口调整大小时防止 div 重叠（带样式组件）【英文标题】：Prevent div-overlapping only on window resize (w/ Styled Components) 【发布时间】：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>
【问题讨论】：
【参考方案1】：使用 flexbox 防止其他元素重叠
如果您想要 fiddle 上的解决方案，就在这里：https://jsfiddle.net/Niwo04/o1df63L2/1/
我已经稍微清理了你的代码，并用普通的 HTML 替换了你的 React 内容（因为我对 React 一无所知）。我还做了一些着色，因为我认为这可能会使所有内容在视觉上更容易理解。
如果您对我的更改有任何疑问，请随时回复此答案； )
body
margin: 0;
background-color: darkgray;
.body
position: fixed;
display: flex;
justify-content: space-between;
background-color: lightgoldenrodyellow;
width: 100vw;
height: 75px;
z-index: 10000;
.titleContainer
display: flex;
align-items: center;
width: 250px;
background-color: red;
flex-shrink: 0;
.pageLinkContainer
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-color: blue;
.pageLink
white-space: nowrap;
margin: 0 0.5rem;
<html>
<body>
<div class="body">
<div class="titleContainer">
<h3>TITLE</h3>
</div>
<div class="pageLinkContainer">
<a class="pageLink">Upload a funny Gif</a>
<a class="pageLink">Look at funny Gifs</a>
<a class="pageLink">Database</a>
</div>
</div>
</body>
</html>【讨论】：
嗨！尽管您在 jsfiddle 上的示例是我想要的，但这对我来说并不真正有用！我已经用更新代码编辑了我上面的帖子。当我调整窗口大小时，页面链接仍会在左侧标题下滑动。此外，我必须使用right: 0 将它们修复到右侧，否则它们不会以某种方式留在标题中。
你好，daritimm，首先你需要知道，如果你把元素定位固定的话，flexbox 是不工作的。但是我认为我们没有相同的 HTML，因为在您的原始帖子中是这个名为“body”的类，但是没有任何元素可以附加这个类，当我写我的答案时，我在这个类中添加了一个 div作为标题和链接的周围元素。这个 div 基本上是主要的 flexbox 元素，它控制标题和链接的位置。您能否也更新您帖子中的 HTML，以便我可以使用您当前版本的 HTML 和 CSS。
嗨 Niwo，我了解了固定元素。但是如果我不修复标题，它就不会粘在顶部。我们怎样才能做到这一点？至于正文：我有一个名为 <HeaderStyle> 的元素，它是 React 的样式化组件。基本上它是这个特定“组件”的包装器，即。作为主体 afaik 的 Header。如果我添加一个单独的 body-div，那么一堆东西会停止工作，所以这可能是我需要研究的东西。
如果我拿走position: fixed，基本上会发生什么，因为整个页面都处于弹性模式（通过全局样式表），所以页眉会降低。我会尝试在我的帖子中添加它，尽管我必须承认它有点混乱。
这和你当前的 HTML 和 CSS (jsfiddle.net/Niwo04/p9vgyLox/24) 一样吗？如果是这样，我同意您需要position: fixed 将具有“another-styled-div”类的元素附加到顶部，但是您的标题和链接不需要position: fixed，因为“ another-styled-div" 将它们放在页面顶部。我真的需要您当前的 HTML，而不仅仅是 CSS，因为在您的原始帖子中没有“another-styled-div”或“main-styled-div”。以上是关于仅在窗口调整大小时防止 div 重叠（带样式组件）的主要内容，如果未能解决你的问题，请参考以下文章