javascript - 我怎样才能让这个 .box 类像博客文章一样流动？ + 工具提示不起作用

Question

除 .box 类外，一切都在我想要的位置。我希望左右边距居中，而上边距与侧边栏匹配。那部分工作得很好，但是，盒子重叠了。我究竟哪里做错了？

这是 CSS:

.box {
width: 250px;
margin: -260px auto;
padding: 25px;
border: solid 1px;
word-wrap: break-word;
position:relative;
display:block;
}

这是 HTML:

<div class="box">
box content
</div>

现在是工具提示问题......当我在浏览器中预览文件时它工作正常但是当我上传网站时，工具提示没有显示。

你也可以在这里看到它(请使用查看源代码查看整个代码):https://peachie.000webhostapp.com/mobile.html

不要担心“mobile.html”的问题，我还远远没有完成这个模板。

Answer 1

1) 重叠是由第二个 .box 元素的负边距引起的。使侧边栏元素向左浮动，这样您就不必为 .box 元素使用负边距。
CSS:

#sidebar {
  top: 20px;
  left: 20px;
  display: block;
  text-transform: uppercase;
  text-align: center;
  font: italic 9px arial;
  text-transform: uppercase;
  width: 150px;
  position: relative;
  padding: 10px;
  border: solid 1px;
  float: left;
}
.box {
  width: 250px;
  margin: 10px auto;
  padding: 25px;
  border: solid 1px;
  word-wrap: break-word;
  position: relative;
  display: block;
}

2) 工具提示不起作用，因为主页是在 HTTPS 中加载的，而工具提示脚本是在 HTTP 中引用的。浏览器不允许在 HTTPS 中加载 HTTP 内容。对这些使用 HTTPS src:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>