html - div 卡错位

Question

这是我正在处理的投资组合

第一次进入网站时，黄色的 Wakey 卡片位于侧边栏下方（它应该在侧边栏的右侧。

刷新网站后，它进入正确的位置是什么原因造成的？

这是卡片所在的内容 div 的 css

     #content
{
    width:70%;
    position: absolute;
    display: inline-block;

}

这是侧边栏

#sidebar
{
    background-color:#4b4b4b;
    margin:0px;
    margin-left:5%;
    width:400px;
    height:1000px;
    -moz-box-shadow: 0px 0px 25px #000000;
    -webkit-box-shadow: 0px 0px 25px #000000;
    box-shadow: 0px 0px 25px #000000;
    display: inline-block;
}

你可以从网站上看到 html，所以我不会发布它以保持简短

在 IE 上它显示正确，它在 chrome 上给了我这个问题

更新：我已将#content-wrapper 显示更改为display:inline;现在，但没有帮助

Answer 1

为什么不浮动你的侧边栏？并让#content 将自身定位在正常的文档流中。您可能还想为#content 设置宽度。

#sidebar
{
  background-color:#4b4b4b;
  margin:0px;
  margin-left:5%;
  width:400px;
  height:1000px;
  -moz-box-shadow: 0px 0px 25px #000000;
  -webkit-box-shadow: 0px 0px 25px #000000;
  box-shadow: 0px 0px 25px #000000;
  float: left;

}

#content
{
 float: left;
}