css - 如何在动态创建的 iframe 中对齐 Facebook Like 按钮？

Question

我知道有很多关于“对齐 Facebook 按钮”的问题，但他们似乎都在谈论人们直接在他们的标记中使用 iframe。我正在使用 HTML5 Facebook 按钮代码，然后动态加载 iframe。

看看 JSFiddle

如您所见，共有三个社交按钮。 Twitter 和 Google+1 iframe 似乎会自动调整其大小以匹配其内容。 Facebook iframe 没有。它似乎是内容较窄的固定宽度 iframe。

有没有一种简单的方法可以使这个 iframe 大小本身合适？

我可能会在页面加载后使用 jQuery 来操纵 iframe 的大小，但我想避免这种情况。如果 iframe 从一开始就加载正确的大小，那就太好了。

我还希望避免在我的代码中直接使用 iframe，因为我稍后会在页面中动态加载 Facebook 脚本，这就是动态注入(inject) iframe 的原因。

Answer 1

我不知道如何让它自动适应，但你可以覆盖宽度。

.social{
    margin:20px 0;
    overflow: hidden;
    padding-left: 20px;

}

.social > div {
    float: left;
    height: 70px;
    margin-right: 0px;
    border: 1px solid red;
}
.facebook{
    width:45px;
}