0

这是网站，更具体地说，是页面。

我目前正在开发一个响应式主题，它有媒体查询，但是我所做的 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都相对定位。有没有人对如何解决这个问题有任何建议？有什么代码花絮吗？

4

1 回答 1

0

我看到的第一件事是这个 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。代码仍然需要清理，但这会更直接地修复它。

这有帮助吗？

于 2013-05-10T10:33:33.290 回答