我想在WordPress里创建一个新主题。 到目前为止，我只使用了子主题，或者分别使用了一些php，html和css。 我下载了_s的starter主题，现在我在CSS方面有点失败。 我试着把widget-are/侧边栏移到左边，但是不管我怎么做，它都将停留在页面的底部，而内容区将只会减少到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>
编辑2:这可能与我导入的虚拟数据有关吗？ 我的意思是widget区域中的所有虚拟内容应该不是问题，因为我设置了overflow:hidden； 我说的对吗？
没有看到您的HTML很难说，但我认为您的问题是内容区域宽度需要设置为75%。
下面是一个使用Flexbox的固定宽度侧边栏布局的简单示例:
null
.content {
background-color: lightBlue;
padding: 10px;
}
.sidebar {
background-color: yellow;
padding: 10px;
}
@media all and (min-width: 600px) {
.wrapper {
display: flex;
}
.content {
flex-grow: 1;
}
.sidebar {
flex-shrink: 0;
margin-left: 30px;
width: 260px;
}
}<main class="wrapper">
<div class="content">
<p>Main content</p>
</div>
<div class="sidebar">
<p>Sidebar</p>
</div>
</main>
使用此HTML结构:
<div class="site-content">
<div class="site-main">
Main content here.
</div>
<div class="widget-area">
Sidebar content here
</div>
</div>
和此CSS:
.site-content{
width: 100%;
}
.site-main {
float: right;
width: 75%;
}
.site-content .widget-area {
float: left;
overflow: hidden;
width: 25%;
}
你会得到的。
这里的运行示例:https://jsfiddle.net/6a3ow5xq/
