Question

我希望有人可以提供帮助，我无法弄清楚这一点。我正在使用_s模板创建一个wordpress主题，我的右栏很难。

如果我只放了一堆换行符，那么流程是正确的。但是，只要我插入任何文本，img或其他任何内容，该数据就会低于中间列。

我知道这很简单，我只是没有看到。

以下是该页面的链接。 http://juststin.com/test/help.html

这是css

.content-area {
        float: left;
}
.site-content {
        margin: 0 20%;
        width: 60%;
        -moz-border-radius: 25px 25px;
        border-radius: 25px 25px;
        border-width: 5px;
        border-style: solid;
        border-color: #333333;
        background: #ffffff;
}
.pictures {
        margin: 0 81%;
        width: 20%;
        -moz-border-radius: 25px 25px;
        border-radius: 25px 25px;
        border-width: 2px;
        border-style: solid;
        border-color: #ffffff;
        background: #ffffff;
}
.site-main .widget-area {
        float: left;
        margin: 0 0 0 -100%;
        width: 20%;
        background: #2E9AFE;
        background: #333333;
}
.site-footer {
        clear: both;
        width: 100%;
        background: #ffffff;
        -moz-border-radius: 25px 25px;
        border-radius: 25px 25px;
        border-width: 5px;
        border-style: solid;
        border-color: #333333;
}
.site-header {
        clear: both;
        width: 100%;
        background: #ffffff;
        -moz-border-radius: 25px 25px;
        border-radius: 25px 25px;
        border-width: 5px;
        border-style: solid;
        border-color: #333333;
}

.menu-div {
        border-width: 2px;
        border-style: solid;
        border-color: #ffffff;
        background-color: #ffffff;
        -moz-border-radius: 25px 25px;
        border-radius: 25px 25px;
        overflow: visible;
}

#page {
        width: 90%;
        margin: 0 auto;
}

Answer 1

问题是你奇怪的列布局。将margin-left -100%提供给.widget-area而不是仅在#primary列之前呈现#pictures。您的#primary列未浮动，因此width #primary容器#pictures的流量为100％。

选项1）将列放在应该去的位置，不要使用负边距。

选项2）将固定宽度指定为{{1}}（看起来约为60％）并将{{1}}浮动

Answer 2

您确实需要对列布局标记进行一些更改。我编辑了你的标记和css以使其工作（我不建议你使用它。）。看看http://pastebin.com/raw.php?i=hqi0MLTc

题外话：就个人而言，我更喜欢使用固定宽度的侧边栏/左侧列和流体宽度仅用于内容区域。

希望这会对你有所帮助。

Answer 3

问题最终是我不得不减小右侧栏的大小。我猜测添加边框会使尺寸增加到100％以上。

文字落在右栏的底部

3 个答案: