Question

大家好我认为这应该是一个相对较快的问题，但由于我是HTML和CSS的初学者，我似乎无法弄清楚这一点。

我有以下CSS代码：

<style>
  div.specialspecial {
    width: 100%;
    height: 0;
    padding-bottom: 56%; 
    position: relative;
    margin-left: 160px;
  }

  iframe {
    width: 90%;
    height: 100%;
    position: absolute;
    display: block;
  }

</style>

这个HTML代码：

<div class="specialspecial">
    <iframe src='dirToLocalHTML' id = 'bg'></iframe>
</div>

似乎div类中的margin-left设置（我需要在本网站上使用侧边栏）使得iframe中的内容偏离中心（大概是160px）。有没有办法让我使用CSS轻松解决这个问题？或者我是否需要使用JavaScript来调整框架的大小？我很乐意学习这两种方法。

编辑：抱歉没有提供足够的信息。希望添加这将有助于：

这是我的html的主体：

<body>

<div class="w3-sidebar w3-bar-block w3-light-grey w3-card-2" style="width:160px;">

  <button class="w3-button w3-block w3-left-align" onclick="myAccFunc('demoAcc')">
  Accordion <i class="fa fa-caret-down"></i>
  </button>

  <div id="demoAcc" class="w3-hide w3-white w3-card-2">
    <a href="#" class="w3-bar-item w3-button">Link</a>
    <a href="#" class="w3-bar-item w3-button">Link</a>
  </div>

</div>

<div class="specialspecial">
    <iframe src='dirToLocalHTML' id = 'bg'></iframe>
</div>

</body>

此代码主要来自以下示例：https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_sidebar_accordion

因为我想为我的网页设置类似的风格

Answer 1

我认为最好的解决方法是简单地为iframe创建一个容器，将其与具有大边距的元素隔离开来：

<div class="specialspecial">
    <div class="pageContent">
        <iframe src='dirToLocalHTML' id = 'bg'></iframe>
    </div>
</div>

即使没有额外的CSS，这也应该限制iframe的大小，iframe会从没有大边距的元素中获得它的大小。

值得注意的是，像这样的布局依赖于边缘内容的大边距，有些过时了。文档的每个部分都应该包含在一个不关心周围发生的事情的元素中。

<style>
.page-container > * {
    display: inline-block;
}
.page-sidebar {
    width: 160px;
}

<div class="page-container">
    <nav class="page-sidebar"></nav>
    <main class="page-content"></main>
<div>

另请参阅：http://www.developer.com/lang/understanding-the-proper-way-to-lay-out-a-page-with-html5.html

使iframe适合具有左边距设置的元素

1 个答案: