Css 如何让类似Facebook的盒子响应？

通过将Facebook代码粘贴到文本小部件中，我在我的应用程序中使用了类似Facebook的方框代码。我的主题是响应性的，我想让like框正确调整大小。我发现了这一点，但他说，他这样做的方式不是“完全响应”，所以我不知道是否有更好的方式

注意：这个答案已经过时了。有关最新的解决方案，请参阅

---

我今天找到了这个要点，它非常有效：

（非常感谢）

/*
使脸谱盒具有响应性（流体宽度）
https://developers.facebook.com/docs/reference/plugins/like-box/ 
*/
/* 
此元素将注入的脚本保存在
某些情况下可能会拉伸布局。所以，我们只是把它藏起来。
*/
#根{
显示：无；
}
/*把容器装满，别的什么都不填*/
.fb_iframe_小部件、.fb_iframe_小部件span、.fb_iframe_小部件span iframe[style]{
宽度：100%！重要；
}

科林给我举的例子与like按钮冲突。所以我把它改成只针对类似的盒子

.fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { width: 100% !important; }

---

在大多数现代浏览器中测试。

注意：科林的解决方案对我不起作用。Facebook可能已经改变了他们的标记。使用

*

应该更适合未来

用div将类似的框包装起来：

<div id="likebox-wrapper">
    <iframe src="..."></iframe> <!-- likebox code -->
</div>

---

css技巧对我来说都不起作用（在我的例子中，类似fb的框是用“float:right”向右拉的）。然而，在没有任何额外技巧的情况下工作的是按钮代码的IFRAME版本。即：

<iframe src="//www.facebook.com/plugins/like.php?href=..." 
        scrolling="no" frameborder="0" 
        style="border:none; overflow:hidden; width:71px; height:21px;" 
        allowTransparency="true">
</iframe>

---

（注意样式中的自定义宽度，无需包含额外的javascript。）

截至2013年6月，您正在寻找的答案可以在这里找到：

使用jQuery重写包含facebook小部件的父容器的内部HTML

---

希望这有帮助

我试图在Drupal7上用“fb_likebox”模块（）实现这一点。让它能够响应。事实证明，我必须编写自己的Contrib模块变体，并去掉宽度设置选项。（默认高度选项对我来说无关紧要）。删除宽度后，我在fb_likebox.tpl.php中添加了

以下是我的CSS样式：

 `#likebox-wrapper * {
  width: 100% !important;
  background: url('../images/block.png') repeat 0 0;
  color: #fbfbfb;
 -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
   -o-border-radius: 7px;
  border-radius: 7px;
   border: 1px solid #DDD;}`

---

截至2015年8月4日，类似于facebook的本机box在facebook开发者页面上提供了一个响应代码片段

您可以在此处生成响应性Facebook likebox

---

这是有史以来最好的解决方案，而不是破解CSS。

这是一个非常简单的解决方案，但不需要浏览器渲染#fb root元素，然后将其隐藏在CSS中。只需将所有元素一起删除。请记住，墙上的图片有一定的大小，这会导致最小的like框大小。我在这里仍然看到的唯一问题是iPhone，如果你滚动新闻提要并加载更多帖子，它们的加载量会大得多，并打破布局。有什么想法吗？别忘了在FB DIV中设置data width=“100%”本身并没有过时！将脚本放到iFrame中可能不可行，这对我来说很有效。非常感谢@sovarn之前一直在尝试编写jquery hack。老实说。。谢谢。如果可以，我会拥抱你！很好地解决了一个困扰我的问题。效果很好，“iframe[style]”到底是做什么的？+1与媒体查询结合使用，在不同的断点处指定一些预设的

max height

值。@wutzebaer，

iframe[style]

只针对具有

样式

属性集（空白或其他）的任何

iframe

元素。i、 e.它将忽略

，但将成功瞄准

。从2014年7月起，该要点不再适用于我。看起来facebook在iframe中添加了硬编码样式，在iframe中添加了

width=“xxxpx”

，这打破了这种方法。我不确定你为什么要首先使用iframe来嵌入likebox。fb-like框{宽度：100%！重要；}是我所需要的全部。在哪里生成这个代码段，或者完整的源代码值应该是什么样子？通过勾选“Adapt to plugin container width”，like框只会在页面加载时更改宽度（而不是调整浏览器窗口的大小）。为了防止在调整窗口大小（或平板电脑方向更改）时弄乱设计，您还可以触发刷新或使用宽度：100%；溢出x：隐藏；最大宽度：500px；（在周围的分区上）

 `#likebox-wrapper * {
  width: 100% !important;
  background: url('../images/block.png') repeat 0 0;
  color: #fbfbfb;
 -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
   -o-border-radius: 7px;
  border-radius: 7px;
   border: 1px solid #DDD;}`