gpt4 book ai didi

html - 在某些屏幕尺寸上,div 移动到 div 之上

转载 作者:行者123 更新时间:2023-11-27 23:09:26 25 4
gpt4 key购买 nike

在特定的屏幕尺寸范围内(1000 秒以下),我有一个内容 div 将完全移动到导航 div 之上。就好像两个 div 都从页面顶部开始一样。

这是 HTML:

<body id="about">
<div class="topnav" id="myTopnav">
<a href="index.html">Home</a>
<a href="#" class="selected">About</a>
<a href="contact.html">Contact</a>
</div>

<div class="row">
<div class="col-md-6" id="left">
<h4><b>Lots of text.../b><h4>
</div>

<div class="col-md-6" id="right">
<img class="rounded" src="IMG-5-12-2017.jpg">
</div>
</div>
</div>

这是相关的 CSS:

@media screen and (min-width: 993px) {
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#myTopnav {
position: absolute;
top: 0px;
left: 0px;
}
.row {
margin: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
#left h4 {
margin: 5em;
}
}
.rounded {
border-radius: 50%;
width: 65%;
}
#left {
margin: 0;
padding: 0;
}
#left h4 {
line-height: 150%;
}
#right {
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}

为什么 row div 会移动到 myTopnav div 之上?

最佳答案

您已为您的#myTopnav 指定了绝对位置。这使它脱离了页面流。

这意味着您必须处理其他元素的间距,以免它们与绝对定位的元素重叠。

在你的例子中,你需要给你的 row 类一个匹配 #myTopnav 元素高度的边距。

由于 row 是一个可能在许多地方使用的类,您可能应该添加一个新的 css 类并使用它来设置间距。例如

<div class="row with-spacing">
<div class="col-md-6" id="left">
<h4><b>Lots of text.../b><h4>
</div>

<div class="col-md-6" id="right">
<img class="rounded" src="IMG-5-12-2017.jpg">
</div>
</div>

CSS:

@media screen and (min-width: 993px) {
.row.with-spacing {
margin-top:50px;
}
}

关于html - 在某些屏幕尺寸上,div 移动到 div 之上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46966208/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com