如何以百分比设置twitter的嵌入式时间轴宽度(响应/流畅设计)

Question

我正在寻找设置twitter的嵌入式时间轴,当你有一个固定的设计时它很容易,但这不是我的情况,我实际上正在为一个新的网站构建一个流畅的,响应式的设计.

我的问题是,我如何设置具有流畅宽度的twitter的嵌入式时间轴,因为它是一个iframe,你应该在你的Twitter帐户中设置px中的with？

谢谢 :)

Answer 1

这似乎对我有用:

  #twitter-widget-0 {
    width:100%;
  }

其中#twitter-widget-0是它生成的iframe,放置在适当样式的容器中.它并不完美:小部件根据宽度生成其内容有点不同,并且在调整大小后边距等不会完全相同; 但这似乎很小.

我很好奇为什么简单的CSS不适合你 - 对不起,如果我错过了什么.

更新2015年6月25日似乎twitter再次更改了代码.这次他们设置了iframe的小部件INSIDE的最大宽度(即从他们的网站生成的代码).因此,我无法对iframe内部生成的CSS进行定位(因为跨域限制) (2认同)

Answer 2

感谢大家,我找到了自己的方式:这几乎就像缺乏说的那样,但我们不得不专注于iframe:

.MyClassForTheDivThatContainTheiFrame iframe{
    width:100%;
}

当然.MyClassForTheDivThatContainTheiFrame也是流畅的%宽度

Answer 3

这个逻辑至少可以改变宽度和高度:

#twitter-widget-0, #twitter-widget-1 {
  float: none; 
  width: 100% !important;  
  height: 250px !important;
}

缩短高度的唯一问题是它隐藏了人们发送推文的文本框,但它确实缩短了高度.我的猜测是,如果你想添加其他CSS样式,你可以放置!important子句.我还假设如果你有三个小部件你会定义#twitter-widget-2等.