Question

我正在建立我的第一个网站，这是第一次寻求帮助。我不确定如何将我的网站的侧边栏小部件区域放在我想要的位置。我正在努力使我的网站完全响应。我想要完成的是让侧边栏“拥抱”内容区域，使它们总是彼此相邻，两者之间的间距小到20-35px，随着屏幕变大，我希望它们能够粘在一起。我遇到了这个网站http://uberhavoc.com，我试图以类似的方式模拟我的侧边栏和内容。这是我的网站：http://peakworthy.com。

我的网站主要网站内容区域有两个div，主要内容和侧边栏。我尝试使用百分比边距，使用清除，clearfix和其他所有内容来定位我想要的位置。我想知道我是否接近这个错误，或者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和背景颜色仅适用于我的演示，可以省略。

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

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

Answer 2

如果可能的话，我会尽量远离浮动。试试这个。显示块将它们并排放置并有助于响应功能，因为侧边栏会在空间用完时自动跳转，而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;
}

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

2 个答案: