Question

在特定范围的屏幕尺寸（低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之上？

Answer 1

您已将#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;
        }
}

Div在某些屏幕尺寸上移动到div的顶部

1 个答案: