css - 如何限制div的宽度？

Question

我在我的网站上放了一个 Google+ 按钮。这是代码：

<div id="gplus"><div class="g-plusone" data-size="medium" data-annotation="inline" data-width="120"></div></div>

#gplus {
position: fixed;
bottom: 40px;
left: 5px;
z-index: 1;
width: 120px;
overflow: hidden;
}

但是谷歌放入inner div的iframe是1200px宽，覆盖内容。如何限制它？我固定了#gplus 的宽度并添加了溢出：隐藏但它没有帮助。：/

Answer 1

您可以添加新的样式定义以使溢出继承到内部 div。例如。

   #g-plusone {overflow:inherit;}

这在 IE7 中不起作用。

您可能会发现需要向生成的 iframe 添加类定义，例如为

 #gplus iframe {width:120px;} 

这会将 #gplus div 中的任何 iframe 设置为 120 像素的宽度。

更新：查看您的网站后，以下样式应该可以解决问题

 #gplus iframe {min-width:120px !important;}

Google 正在设置其框架的最小宽度，但您可以通过设置最小宽度并使用重要的覆盖来覆盖它。

Answer 2

max-width: 500px;或您想要的任何最大宽度，这样您就可以限制或控制元素的宽度。