下划线可湿性粉剂主题CSS侧边栏移动

我正试图在Wordpress中创建一个新主题。到目前为止，我只使用了子主题，或者分别使用了一些php、html和css。我下载了(u)的starter主题,现在css有些失败。我正试图将小部件区域/侧边栏移到左侧，但不管我怎么做，它都会停留在页面底部，而内容区域只会减少到75%

这就是我所尝试的：

.content-area {
 float: right;
 margin: 0 0 0 -25%;
 width: 100%;
}
.site-main {
 margin: 0 0 0 25%;
}
.site-content .widget-area {
 float: left;
 overflow: hidden;
 width: 25%;
}

我知道这是非常基本的东西，我现在感觉有点傻，但不管我做什么，侧边栏都不会出现在旁边。我还尝试为内容和小部件区域设置200px的像素宽度。我会继续努力，但如果有人知道答案并能帮助我，我会非常高兴！我不希望设置z索引

提前感谢,， 卡洛斯

编辑：这是chrome site inspector中的外观

<div id="primary" class="site-main">blabla</div>
<div id="secondary" class="widget-area">blabla</div>

blabla
布拉布拉

---

EDIT2：这可能与我导入的虚拟数据有关吗？我的意思是小部件区域中的所有虚拟内容都不应该是问题，因为我设置了overflow:hidden；我说得对吗？

很难说没有看到HTML，但我认为您的问题是内容区域宽度需要设置为

75%

FWIW，下面是一个使用flexbox的固定宽度边栏布局的简单示例：

.content{
背景颜色：浅蓝色；
填充：10px；
}
.侧边栏{
背景颜色：黄色；
填充：10px；
}
@介质和全部（最小宽度：600px）{
.包装纸{
显示器：flex；
}
.内容{
柔性生长：1；
}
.侧边栏{
弹性收缩：0；
左边距：30px；
宽度：260px；
}
}

主要内容

边栏

很难说没有看到HTML，但我认为您的问题是内容区域宽度需要设置为

75%

FWIW，下面是一个使用flexbox的固定宽度边栏布局的简单示例：

.content{
背景颜色：浅蓝色；
填充：10px；
}
.侧边栏{
背景颜色：黄色；
填充：10px；
}
@介质和全部（最小宽度：600px）{
.包装纸{
显示器：flex；
}
.内容{
柔性生长：1；
}
.侧边栏{
弹性收缩：0；
左边距：30px；
宽度：260px；
}
}

主要内容

边栏

使用此HTML结构：

<div class="site-content">
 <div class="site-main">
  Main content here.
 </div>
 <div class="widget-area">
  Sidebar content here
 </div>
</div>

你会得到它的

---

此处运行示例：

使用此HTML结构：

<div class="site-content">
 <div class="site-main">
  Main content here.
 </div>
 <div class="widget-area">
  Sidebar content here
 </div>
</div>

你会得到它的

---

在这里运行示例：

我构建了一个带有下划线的主题，出于某种原因，它们在结束标记之外获得了_sidebar（）。他们也没有它的标签内。我所做的是首先将get_sidebar（）放在aside标记中，并将其移动到结束标记之后。我不想将主标记设置为display:flex，所以我在和周围添加了一个包装器标记（div.sidebar-page），然后将其设置为display:flex。由于需要左侧的侧边栏，您只需将flex direction设置为row reverse即可

 .sidebar-page {
    display: flex;
    flex-direction: row-reverse;
    margin: 0 auto; /* optional */
  }

---

我构建了一个带有下划线的主题，出于某种原因，它们在结束标记之外有了_sidebar（）。他们也没有它的标签内。我所做的是首先将get_sidebar（）放在aside标记中，并将其移动到结束标记之后。我不想将主标记设置为display:flex，所以我在和周围添加了一个包装器标记（div.sidebar-page），然后将其设置为display:flex。由于需要左侧的侧边栏，您只需将flex direction设置为row reverse即可

 .sidebar-page {
    display: flex;
    flex-direction: row-reverse;
    margin: 0 auto; /* optional */
  }

---

谢谢你的快速回答，但替换左边的边距：25%；宽度为75%时，结果相同。但你是对的，它似乎在你的例子中起作用，只是似乎不适用于wordpress。好的，我刚刚在本地创建了一个新的wordpress站点，它似乎在不导入虚拟数据的情况下工作。。。谢谢你花时间，伙计，我现在觉得自己好笨。谢谢你的快速回答，但是把左边的边距改成25%；宽度为75%时，结果相同。但你是对的，它似乎在你的例子中起作用，只是似乎不适用于wordpress。好的，我刚刚在本地创建了一个新的wordpress站点，它似乎在不导入虚拟数据的情况下工作。。。谢谢你慢慢来，伙计，我现在感觉好笨。谢谢你的快速回答！我刚刚尝试了display:flex，并将所有内容的固定宽度设置为200px，但它仍然保持在底部。内容区宽度：75%；它也不起作用。好的，我刚刚在本地创建了一个新的wordpress站点，它似乎在没有导入虚拟数据的情况下工作。。。谢谢你花时间！谢谢你的快速回答！我刚刚尝试了display:flex，并将所有内容的固定宽度设置为200px，但它仍然保持在底部。内容区宽度：75%；它也不起作用。好的，我刚刚在本地创建了一个新的wordpress站点，它似乎在没有导入虚拟数据的情况下工作。。。谢谢你花时间！