Javascript 为什么我的侧边栏被推到主页内容下面？（再次）

两天前，我问为什么一些分栏的内容会被推到另一个栏目下面。直到我做了一张桌子，这才起到了作用，出于某种原因，它打破了展示顺序

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

.leftcolumn

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

.righcolumn

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

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

display:flex

属性[如这里的答案所示][2]，但这只将主要内容中的两个示例帖子合并到一行，而对侧边栏没有影响。我测试的另一个方法是将

position:relative

分配给主要内容，将

position:absolute

分配给侧边栏，这是[此答案给出的解决方案][3]，但这对实际显示没有影响。我还尝试了@rajneesh tiwari在下面的建议，在侧边栏的父容器下定义

z-index:999

，但这对显示也没有影响

下面是代码。由于某种原因，侧边栏进入了表格的底部

* {
颜色：黑色；
字体系列：Arial，无衬线；
}
身体{
背景：灰色；
填充物：5px；
}
.标题{
背景色：白色；
边界半径：4px；
填充：25px；
文本对齐：居中；
}
.标题h1{
字体大小：50px；
}
.标题p{
字体大小：15px；
字体：斜体；
}
托普纳夫先生{
背景色：#444；
边界半径：4px；
显示器：flex；
证明内容：中心；
溢出：隐藏；
}
.topnav a{
颜色：白色；
浮动：左；
最大宽度：25%；
填充：12px 16px；
文本对齐：居中；
文字装饰：无；
宽度：100%；
}
.topnav a:悬停{
背景色：#eee；
颜色：黑色；
}
.topnav a：激活{
背景色：#444；
颜色：白色；
}
.leftcolumn{
浮动：左；
宽度：75%；
}
.右栏{
背景色：白色；
浮动：左；
左侧填充：20px；
宽度：计算（25%-20px）；
}
.卡片{
背景色：白色；
边界半径：4px；
边缘顶部：20px；
填充：20px；
}
.罗：之后{
明确：两者皆有；
内容：“；
显示：表格；
}
桌子{
边框：1px纯黑；
边界塌陷：塌陷；
字体系列：Arial，无衬线；
保证金：5px；
宽度：100%；
}
th，td{
边框：1px纯黑；
边界塌陷：塌陷；
字体系列：Arial，无衬线；
保证金：5px；
填充物：5px；
}
@媒体屏幕和屏幕（最大宽度：800px）{
.leftcolumn、.rightcolumn{
填充：0；
宽度：100%；
}
}
@媒体屏幕和屏幕（最大宽度：400px）{
.topnav a{
浮动：无；
宽度：100%；
}
}
重量计算器
重量计算器
人
重量
杰克
1.
约翰
2.
乔
3.
全部的
document.getElementById（“jack”）.contentEditable=true；
document.getElementById（“john”）.contentEditable=true；
document.getElementById（“joe”）.contentEditable=true；
函数myFunction（）{
var jack2=document.getElementById（“jack”）.innerText；
var john2=document.getElementById（“john”）.innerText；
var joe2=document.getElementById（“joe”）.innerText；
var total2=parseInt（jack2）+parseInt（john2）+parseInt（joe2）；
document.getElementById（“total”）.innerHTML=total2；
}
myFunction（）；
试验
正文

试验
正文

试验
正文

}

---

“清楚：两者”是问题所在。删除它或将其设置为“clear:right”

您应该在一个公共父级（行）中为两个子div（leftcolumn和righcolumn）。这应该解决这里的问题

PS-这与问题无关。做上述事情应该可以解决你目前的问题。但是并排排列项目的理想方法是使用flexbox。你可以给我一个划船的机会。不需要对两个孩子都使用float-left，这将是实现这种布局的更理想的方法

.row {
   display: flex
}

一个更好的解决方案是使用bootstrap，您可以使用bootstrap网格系统轻松实现这种类型的布局-

* {
颜色：黑色；
字体系列：Arial，无衬线；
}
身体{
背景：灰色；
填充物：5px；
}
.标题{
背景色：白色；
边界半径：4px；
填充：25px；
文本对齐：居中；
}
.标题h1{
字体大小：50px；
}
.标题p{
字体大小：15px；
字体：斜体；
}
托普纳夫先生{
背景色：#444；
边界半径：4px；
显示器：flex；
证明内容：中心；
溢出：隐藏；
}
.topnav a{
颜色：白色；
浮动：左；
最大宽度：25%；
填充：12px 16px；
文本对齐：居中；
文字装饰：无；
宽度：100%；
}
.topnav a:悬停{
背景色：#eee；
颜色：黑色；
}
.topnav a：激活{
背景
.row {
   display: flex
}