媒体查询以防止菜单和侧边栏与标题/正文合并

Question

This is the website, and more specifically, the page.

我目前正在开发一个响应式主题，其中包含媒体查询，但我所做的 CSS 修改导致菜单（右上角为金色）和侧边栏（这只存在于博客中）页面，但很重要......它是内容块右侧的框）与标题/标题/左侧内容合并。它显示在 ipad mini 和普通 ipad 4 上，但在 android 浏览器屏幕上还可以。您可以通过调整浏览器大小来观察问题。

@media only screen and (min-width:768px) {
.site-navigation .nav-menu {
 display: block;
}
}@media only screen and (max-width:767px) {
.menu-toggle {
display: block;
}
}@media only screen and (min-width:768px) and (max-width:959px) {
.wrap {
max-width: 728px;
}

那是媒体屏幕 css。各个div都相对定位。有没有人对如何解决这个问题有任何建议？有什么代码花絮吗？

Answer 1

我首先看到的是这个 HTML 没有关闭：

 <div id="header" onclick="location.href='http://camillagabrieli.com    

这需要先解决。尝试在 CSS 中添加轮廓：

* { outline: 1px dashed black } 

我发现这有助于了解不同浮动元素的实际问题。您的安排和 CSS 有很多问题。你不需要对所有这些东西进行相对定位。

修复主要内容部分：

将以下内容添加到#main：

overflow:hidden; 

并像这样制作#content和#sidebar-primary：

#content {
    float: left;
    width: 75%;
    margin-left: 40px;
    margin-right: 10px;
    margin-top: 10px;
    min-height: 50px;
}

#sidebar-primary {
    float: left;
    width: 20%;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    height: 50%;
}

我不确定你为什么有 margin-top: -460px;在您的代码中，但这就是破坏它的原因，因为#main 实际上并不包含#content 和#sidebar-primary。代码仍然需要清理，但这会更直接地修复它。

这有帮助吗？