让 Content-Area 和 Widget-Area 并排放置

Posted 2023-03-06

【中文标题】让 Content-Area 和 Widget-Area 并排放置

【英文标题】：Getting Content-Area and Widget-Area to sit side by side

【发布时间】：2017-11-25 10:04:32

【问题描述】：

我的网站是 www.rosstheexplorer.com。

我使用的是 Penscratch 主题，虽然已经修改了它的许多方面。

我最近做了一些改变，包括让我的标题和导航栏全宽。

这些更改的一个意外后果是现在我的小部件区域不再与我的内容区域并排放置。

我使用 Google Chrome 上的开发者工具并开始尝试更改这两个元素的宽度、内边距和边距。我没有尝试过任何接近我想要的结果。我会做更多的实验，但我不知道从哪里开始。

在 style.css 中是否需要对

进行修改

.site-content .widget-area 
    margin-top: 27px;
    padding-top: 24px;
    border-top: 3px solid #eee;

或

.widget 
    line-height: 2.09231em;
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 0 27px;
    padding: 0 0 27px;
    border-bottom: 1px solid #eee;

【问题讨论】：

嗨，Ross，乍一看，我发现您的内容位于“#content”div 之外。接下来要解决此问题，您需要在 '#secondary' 中设置 'float:left'。

你指的是这段代码' '

【参考方案1】：

检查您的网站，据我了解，这是与浮动相关的问题。 尝试申请

float:left

为您的“.widget-area”

【讨论】：

我使用了 Rupali Pabla 解决方案，不过谢谢你的想法

【参考方案2】：

看看这段代码是否适合你：

#primary.content-area float: left;width: 70%;
#primary.content-area .site-mainwidth:100%;
.widget-areafloat:right;width:30%;

【讨论】：

我应该把它放在 style.css 中吗？

谢谢 :) :) :)