html - 我的 CSS 代码中的奇怪错误使文本随机获得一个巨大的 "margin"

Question

我不知道为什么会这样。

我有this code here .

它工作正常，但“有时”(并且连续多次)无缘无故地发生这种情况:

所有的 .box 类。

抱歉，我不得不分享“所有”我的代码，但我不知道这是为什么。

它应该是这样的:

我不知道这是否正常，但您需要 id，您可以从 here 下载这两个文件。 (HTML 和 CSS + 图像)因为在 jsfiddle 中似乎一直都有效，

我不知道这是否重要，但我在 mac 上使用 chrome(最新)。

编辑:我似乎每次都能在 safari 中正常工作。

提前致谢!!请询问任何需要的说明!

---

顺便说一句，我的标题太可怕了，抱歉!但我不知道问题出在哪里，所以我无法真正描述它，请随时编辑或评论任何建议。

Answer 1

在你的style.css

1. 在 #container 上移除 overflow:hidden
2. 将 overflow:hidden 设置为 .box
3. 将 float:left 设置为 .box img
4. 将 float:right 设置为 .follow

新

#container {
    height:100%;
    width:520px;
    position:relative;
    left:50%;
    margin:20px 0 0 -250px;
}
.box {
    border:1px solid gray;
    height:200px;
    width:500px;
    float:left;
    margin:0px 0 20px 10px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    overflow:hidden;
}
.box img {
    width:140px;
    height:140px;
    margin: 15px 0 0 15px;
    float:left;
}
.follow {
    /*outline:1px solid red;*/
    height:80px;
    width:260px;
    float:right;
    margin:25px 30px 0 0;
}