保证金不适用于CSS

Question

我一直在寻找解决方案，但我无法理解如何将文本与iframe分开。我尝试的一切都不起作用（例如，this回答）。 这是一个有想法的截图：

这是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样式，没有办法通过样式表设置它们。