时间戳

首页 > 解决方案 > 如何使用 CSS 使自定义嵌入代码具有响应性

css - 如何使用 CSS 使自定义嵌入代码具有响应性

问题描述

我需要将来自外部网站的自定义嵌入代码嵌入到我的 wordpress 博客文章中。

自定义嵌入代码具有以下格式：

<!-- TradingView Chart BEGIN -->
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
var tradingview_embed_options = {};
tradingview_embed_options.width = '640';
tradingview_embed_options.height = '400';
tradingview_embed_options.chart = 'z1zThvGU';
new TradingView.chart(tradingview_embed_options);
</script>
<p><a href="https://www.tradingview.com/chart/GBPUSD/z1zThvGU-GBPUSD-Forecast-on-H4/">GBPUSD, Forecast on H4.</a> by <a href="https://www.tradingview.com/u/DatTong/">DatTong</a> on <a href="https://www.tradingview.com/">TradingView.com</a></p>
<!-- TradingView Chart END -->

该代码工作正常，但在移动设备或表格中查看时它没有完全响应，并且它也不是以桌面为中心。可能是因为代码生成了固定宽度和固定高度。

但这就是问题所在。我需要覆盖嵌入代码样式，以便我可以随意设置它的样式。

我尝试了很多选择，但它不起作用。我还检查了 DOM，发现生成了一个包装 div，但是当尝试设置生成的包装 div 的样式时，它仍然无法正常工作。我做的另一个选择是手动将代码包装在 wordpress 编辑器中，希望我可以控制宽度和高度，但仍然无法正常工作。尽管即使它有效，但在每篇博客文章中手动设置样式也不是一个好主意，因此如果我们可以使用自定义样式表覆盖它会很棒。

请参阅下面的小提琴：

http://jsfiddle.net/7695akjh/8/

有什么想法可以使此代码完全响应吗？

标签： css

解决方案

在摆弄标记之后，我终于弄明白了！所以这解决了。

推荐阅读