Html 为什么我的侧边栏被推到主页内容下面？

通过使用CSS创建不相等的列，我尝试将页面划分为一个包含主要内容的大列（

.leftcolumn

）和一个用作侧边栏的较细列（

.righcolumn

）。然而，侧边栏被推到了主要内容的下方，除非我使任一列的宽度比它的宽度小2%

我试着切换标签的顺序，但没有效果。我还尝试为主要内容提供一个

display:flex

属性，但这只将主要内容中的两个示例帖子合并到一行，而对侧边栏没有影响。我测试的另一个功能是将

position:relative

分配给主要内容，将

position:absolute

分配给边栏，边栏是，但这对实际显示没有影响。我还尝试了@rajneesh tiwari在下面的建议，在侧边栏的父容器下定义

z-index:999

，但这对显示也没有影响

我的代码部分基于一个示例（原始代码运行良好），如下所示：

* {
字体系列：Verdana；
}
身体{
背景#f2f2；
填充物：5px；
}
.leftcolumn{
浮动：左；
宽度：75%；
}
.右栏{
背景色：#F2F2；
浮动：左；
左侧填充：20px；
宽度：25%；
}
.卡片{
背景色：白色；
边界半径：8px；
边缘顶部：20px；
填充：20px；
}
.罗：之后{
明确：两者皆有；
内容：“；
显示：表格；
}
@媒体屏幕和屏幕（最大宽度：800px）{
.leftcolumn、.rightcolumn{
填充：0；
宽度：100%；
}
}
标题
描述
文本

标题
标题说明，2017年9月2日
形象
一些文字

文本

关于我
正文

热门帖子
正文

跟着我
正文

您可以使用

z-index:999

在侧边栏的父容器上

用于沿z轴（深度标注）定位元素。

您可以使用

z-index:999

在侧边栏的父容器上

---

用于沿z轴（深度标注）定位元素。

如果要使用flexbox，请删除浮动并清除。然后使父容器（.row）成为一个灵活的框（display:flex）。然后，使用flex属性，而不是列元素上的width属性。例如，您可以给左栏“flex:5”和右栏“flex:1”

如果要使用flexbox，请删除浮动并清除。然后使父容器（.row）成为一个灵活的框（display:flex）。然后，使用flex属性，而不是列元素上的width属性。例如，您可以给左栏“flex:5”和右栏“flex:1”

问题在于侧边栏上的填充。（填充不会影响宽度，因此侧边栏为25%+20px填充，这就是它被向下推的原因）

要解决此问题，请从侧边栏或leftcolumn的宽度中删除（减去）填充。 我喜欢使用calc（）来完成此操作。在下面的示例中，我从.right列的25%中删除了20px

width: calc(25% - 20px);

请记住，您添加的任何填充都会添加到总宽度中，使其超过100%，这就是它不起作用的原因。

* {
字体系列：Verdana；
}
身体{
背景#f2f2；
填充物：5px；
}
.leftcolumn{
浮动：左；
宽度：75%；
}
.右栏{
背景色：#F2F2；
浮动：左；
左侧填充：20px；
宽度：计算（25%-20px）；
}
.卡片{
背景色：白色；
边界半径：8px；
边缘顶部：20px；
填充：20px；
}
.罗：之后{
明确：两者皆有；
内容：“；
显示：表格；
}
标题
描述
文本

标题
标题说明，2017年9月2日
形象
一些文字

文本

关于我
正文

热门帖子
正文

跟着我
正文

问题在于侧边栏上的填充。（填充不会影响宽度，因此侧边栏为25%+20px填充，这就是它被向下推的原因）

要解决此问题，请从侧边栏或leftcolumn的宽度中删除（减去）填充。 我喜欢使用calc（）来完成此操作。在下面的示例中，我从.right列的25%中删除了20px

width: calc(25% - 20px);

请记住，您添加的任何填充都会添加到总宽度中，使其超过100%，这就是它不起作用的原因。

* {
字体系列：Verdana；
}
身体{
背景#f2f2；
填充物：5px；
}
.leftcolumn{
浮动：左；
宽度：75%；
}
.右栏{
背景色：#F2F2；
浮动：左；
左侧填充：20px；
宽度：计算（25%-20px）；
}
.卡片{
背景色：白色；
边界半径：8px；
边缘顶部：20px；
填充：20px；
}
.罗：之后{
明确：两者皆有；
内容：“；
显示：表格；
}
标题
描述
文本

标题
标题说明，2017年9月2日
形象
一些文字

文本

关于我
正文

热门帖子
正文

跟着我
正文

感谢您的回复，但这也没有任何效果。感谢您的回复，但这也没有任何效果。顺便说一句，这个解决方案也很有效——谢谢。一个问题：使用flex over width的优势是什么？这对我来说似乎没有什么区别。这里的flex属性是flex-basis的缩写。这和宽度之间的区别在于，显然，flex容器的方向可以设置为column。在这种情况下，flex basis将确定元素的高度而不是宽度，而width pro