保证金在CSS中不起作用

Question

我一直在寻找解决方案，但我不明白如何将文本与iframe分开。 我尝试的所有方法均无效（例如， 此答案）。 这是一个有想法的屏幕截图：

这是HTML（我一生中很少使用它，并且以前从未使用过容器，因此，我敢肯定比我更熟练的人可以清楚看到该错误）：

<div class="container">
  <iframe src="link" width="500px" height="500px" align="left" style="border: 1px solid #ccc" frameborder=0></iframe>
  <article>
    <font face="calibri" size="30" style="background-color: powderblue;">title</font>
    <h4></h4>
    <font face="verdana">text</font>
  </article>
</div>

这是CSS（我正在测试margin-left: 10px但10或1000px不会改变任何内容）：

article {
    margin-left: 10px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}

body {
    max-width: 100%;
}

div.container {
    width: 100%;
    border: 1px solid gray;
}

iframe {
    float: left;
    margin-right: 30px;
    margin-bottom: 20px;
    margin-left: 20px;
}

Answer 1

我认为您可以通过以下方式解决此问题position: relative; 到您的文章标签。 这样，您就可以使用left属性而不是margin-left属性来指定希望它具有的位置偏移量。

我的意思是：

article {
    position: relative;
    left: 10px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
}

body {
    max-width: 100%;
}

div.container {
    width: 100%;
    border: 1px solid gray;
}

iframe {
    float: left;
    margin-right: 30px;
    margin-bottom: 20px;
    margin-left: 20px;
}

如果这不是您想要的，我也认为position属性以及left ， right ， top和bottom属性似乎非常适合您的问题，因此我建议您看一下它们。

Answer 2

HTML5不支持iframe样式，因此无法通过样式表进行设置。