Gist --如何设置嵌入Gist的高度和宽度
Gist --如何设置嵌入Gist的高度和宽度
提问于 2014-04-09 08:41:43
为了在Wordpress博客中嵌入来自Github的非常长的要点，什么代码允许我设置高度以生成垂直滚动条？500px左右的像素就很完美了。
EDIT：这个问题现在已经解决了，但我在这个问题上花了很多时间，我相信有一个专门针对这个问题的线程会很有帮助。我已经在下面发布了一个答案，它是有效的。
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-04-09 08:52:21
<style type="text/css">
.gist {width:500px !important;}
.gist-file
.gist-data {max-height: 500px;max-width: 500px;}
</style>
<script src="https://gist.github.com/user-name/123456789.js"></script>示例：样板网页借用自：http://www.dummies.com/how-to/content/a-sample-web-page-in-html.html截至2016年2月24日，答案与OSX Snow Leopard 10.6.8上的Firefox44.0.2的广告一样有效。
<html>
<!-- Text between angle brackets is an HTML tag and is not displayed.
Most tags, such as the HTML and /HTML tags that surround the contents of
a page, come in pairs; some tags, like HR, for a horizontal rule, stand
alone. Comments, such as the text you're reading, are not displayed when
the Web page is shown. The information between the HEAD and /HEAD tags is
not displayed. The information between the BODY and /BODY tags is displayed.-->
<head>
<title>Enter a title, displayed at the top of the window.</title>
</head>
<!-- The information between the BODY and /BODY tags is displayed.-->
<style type="text/css">
.gist {width:300px !important;}
.gist-file
.gist-data {max-height: 300px;max-width: 300px;}
</style>
<body>
<h1>Enter the main heading, usually the same as the title.</h1>
<p>Be <b>bold</b> in stating your key points. Put them in a list: </p>
<ul>
<li>The first item in your list</li>
<li>The second item; <i>italicize</i> key words</li>
</ul>
<p>Improve your image by including an image. </p>
<p><img src="http://www.mygifs.com/CoverImage.gif" alt="A Great HTML Resource"></p>
<p>Add a link to your favorite <a href="http://www.dummies.com/">Web site</a>.
Break up your page with a horizontal rule or two. </p>
<hr>
<p>Finally, link to <a href="page2.html">another page</a> in your own Web site.</p>
<!-- And add a copyright notice.-->
<p>© Wiley Publishing, 2011</p>
<script src="https://gist.github.com/lawlist/12345678.js"></script>
</body>
</html>Stack Overflow用户
发布于 2015-12-29 02:43:32
以上所有答案都不再有效。这是更新的CSS，它在需要的地方用可见的滚动条正确地显示要点。
.gist {
max-width:350px;
overflow:auto;
}
.gist .blob-wrapper.data {
max-height:200px;
overflow:auto;
}请参阅这篇博客文章，例如：How to set custom height and width of embedded Github Gist。
Stack Overflow用户
发布于 2015-04-22 00:14:20
他们似乎已经改变了一些东西，所以现在你需要这样做：
<style type="text/css"> .gist {width:500px; overflow:auto} .gist .file-data {max-height: 500px;max-width: 500px;} </style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22950812
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号