Question

我正在尝试将某人的博客（经过他们的许可）嵌入我的博客中。我正在用iframe做这件事，而且也只想裁掉他博客的一部分。我找到了一些代码，删除了我希望嵌入他的博客的静态页面上的一些元素（以腾出更多空间），以及如何在iframe中移动他的博客以便将其裁剪到我想要的位置

我现在唯一的问题是我希望我正在裁剪的位出现在我的博客的主包装中，以便它看起来更加集成。如果您查看我博客的测试页面，您会看到我的意思....

damianp1.blogspot.co.uk

主要包装器（如果这是它的名称）浮动在iframe上方。

以下是我以前用过的html ...

<style type="text/css">

.blog-pager, .footer, .comments, .post-footer, .main-background, .feed-links, .post-   title, .sidebar, #Attribution1, #footer-wrapper .sidewrapper { display:none !important;}
#main-wrapper {width: 95%; float:none; margin: 0 auto !important;}

</style>
</b:if>
<style>]


#outerdiv {width: 250px; overflow:hidden; position: relative;}
#innerdiv {position: absolute; left: -360px; top: -100px;clip:rect(250px 1700px 20000px 329px);}
</style>

<div id="outerdiv">
<div id="innerdiv">
<iframe width="1000" height="30000" src="http://birdingsthelens.blogspot.co.uk/"  id=’innerdiv’ scrolling="no" frameborder="0"></iframe>
</div>
</div>

如何将博客的裁剪位置放入主包装中，还是有更好的方法可以做到这一点？你可能会说我对HTML一无所知，我只是复制并粘贴我在网上发现的一些代码！

干杯，达米安

Answer 1

要在蓝色区域内获取iframe，您需要删除与innerdiv相关的所有样式（包括div标记本身），因为它们不需要...

<style type="text/css">

.blog-pager, .footer, .comments, .post-footer, .main-background, .feed-links, .post-   title, .sidebar, #Attribution1, #footer-wrapper .sidewrapper { display:none !important;}
#main-wrapper {width: 95%; float:none; margin: 0 auto !important;}

</style>
</b:if>
<style>]


#outerdiv {width: 250px; overflow:hidden; position: relative;}
</style>

<强>编辑：

<div id="outerdiv" style="width: 600px; overflow: hidden">

<iframe width="850" style="position: relative; left: -280px; top: -290px" height="30000" src="http://birdingsthelens.blogspot.co.uk/" scrolling="no" frameborder="0"></iframe>
</div>

使用相对位置可以裁掉任何不需要的内容。

注意：如果您希望内容为页面宽度，而不是蓝色区域的标准大小，则以下是尺寸：

<div class="post-outer" style="width:875px">
<div id="outerdiv" style="width: 900px; overflow: hidden">
<iframe width="1300" style="position: relative; left: -440px; top: -290px" height="30000" src="http://birdingsthelens.blogspot.co.uk/" scrolling="no" frameborder="0"></iframe>

在博客中定位iframe

1 个答案: