요령 - 임베디드 요령의 높이와 너비를 설정하는 방법

Wordpress 블로그에 Github의 긴 GIST를 포함 시키려면 어떤 코드에서 세로 스크롤 막대가 생성되도록 높이를 설정할 수 있습니까? 500px 주위의 무언가가 완벽 할 것입니다.요령 - 임베디드 요령의 높이와 너비를 설정하는 방법

편집가 : 문제는 이제 해결하지만, 나는이 문제에 너무 많은 시간을 보냈다, 나는 그 문제에 전념 스레드를 가지고 도움이 될 것입니다 생각합니다. 아래에 답변을 게시했습니다.

출처

2014-04-09 lawlist

아마 @ haxan7의 대답은 이제 원래의 정답이 변경되었다는 것을 고려하여 올바른 것으로 표시되어야합니까? – starbeamrainbowlabs

@starbeamrainbowlabs - OSX Snow Leopard 10.6.8에서 Firefox 44.0.2를 사용하여 2016 년 2 월 24 일까지 내 대답이 여전히 작동하는지 확인했습니다. – lawlist

<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>

예 : 상용구 웹 페이지에서 빌린 : [. 대답은 OSX 스노우 레오파드 10.6.8에서 파이어 폭스 44.0.2 2 월 (24) 2016로 광고 작동] http://www.dummies.com/how-to/content/a-sample-web-page-in-html.html가

<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>&#169; Wiley Publishing, 2011</p> 
<script src="https://gist.github.com/lawlist/12345678.js"></script> 
</body> 
</html>

출처

2014-04-09 00:52:20 lawlist

내부 처리가 필요합니까? 외부 스타일 시트로 사용할 수 없습니다. –

@Josh C - 현재 웹 페이지에서 요지를 사용하기위한 현재 설정이 없습니다. 이 스레드에서 다른 두 가지 솔루션을 사용해보고 그 중 하나가 작동하는지 확인하십시오. 아마 2014 년 4 월 19 일에서 현재 날짜 사이에 뭔가가 변경되었을 것입니다. – lawlist

죄송합니다. 이것이 내부적 일 필요가 있었습니까? –

그들은 뭔가를 변경 한 것 같습니다. 이제 다음을 수행해야합니다.

<style type="text/css"> .gist {width:500px; overflow:auto} .gist .file-data {max-height: 500px;max-width: 500px;} </style>

출처

2015-04-21 16:14:20

위의 답변 중 어느 것도 더 이상 작동하지 않습니다. 필요한 경우 보이는 스크롤바로 요점을 올바르게 표시하는 업데이트 된 CSS가 있습니다. How to set custom height and width of embedded Github Gist :

.gist { 
    max-width:350px; 
    overflow:auto; 
} 

.gist .blob-wrapper.data { 
    max-height:200px; 
    overflow:auto; 
}

예를 들어이 블로그 게시물을 참조하십시오.

출처

2015-12-28 18:43:31

요령 - 임베디드 요령의 높이와 너비를 설정하는 방법

답변

관련 문제