不确定容器层次结构是否导致我定位问题

Question

我正在建立我的第一个网站，这是第一次寻求帮助。我不确定如何将我网站的侧边栏小部件区域定位在我想要的位置。我正在努力使我的网站完全响应。我想要完成的是让侧边栏到 "hug" 内容区域，这样它们总是彼此相邻，它们之间有 20-35 像素的小边距，并且随着屏幕变大，我希望它们粘在一起.我发现了这个网站 http://uberhavoc.com, I am trying to model my sidebar and content in a similar way. Here is my site: http://peakworthy.com。

我的网站有主要网站内容区域，有两个 div，主要内容和侧边栏。我尝试使用百分比边距、清除、清除修复和其他所有内容来定位我想要的位置。我想知道我是否正在处理这个问题，或者 DOM 是否导致样式层次结构出现问题。如果您有任何想法，我将不胜感激。这几天一直在纠结这个问题。

Answer 1

您需要将主要内容区域和边栏内容放在一个容器元素中。然后使用 media queries 确定侧边栏何时重新流动的断点。

以下是我建议的方法的基本标记。主要内容和侧边栏内容是容器元素的两个兄弟元素。它们向左浮动，并且每个都应用了百分比宽度。媒体查询用于确定两列内容何时应并排或堆叠。

<main class="cf">
    <div class="content">Main Content</div>
    <aside class="sidebar">Sidebar</div>
</main>

main {
    background-color: #ddd;
    min-height: 400px;
}
.content,
.sidebar {
    float: left;
    width: 100%;
}
.content {
    background-color: #ccc;
}
.sidebar {
    background-color: #bbb;
}
@media ( min-width: 480px ) {
    .content {
        width: 70%;
    }
    .sidebar {
        width: 30%;
        background-color: #bbb;
    }
}

上面用到的clearfix和背景色只是为了我的demo，可以省略。

jsFiddle: http://jsfiddle.net/vj9zq0oq/

调整 jsFiddle 的大小以查看内容列的重新排序。

Answer 2

如果可能的话，我会尽量远离浮动。试试这个。 display-block 将它们并排放置并有助于响应功能，因为侧边栏会在 space 用完时自动跳下，而 text-align:center 使它们在较大尺寸时保持在页面中间.

.site-content {
    padding-bottom: 4em;
    background: #f0f0f0;
    text-align: center;
}
.content-area {
    display: inline-block;
}
.site-content .widget-area {
    width: 380px;
    padding: .3em 0 .3em 4em;
    background: #ffffff;
    display: inline-block;
    margin-left: 20px;
    vertical-align:top;
}

不确定容器层次结构是否导致我定位问题

Unsure if container hierarchy is causing me positioning issues

html

css

php

wordpress

position