html - Div卡错位

Question

这是我的 Portfolio我正在努力

第一次进入网站时，黄色的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

为什么不 float 侧边栏？并让#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;
}