html - 边距不影响 soundcloud div

Question

我正在使用 div 在页面的左侧和右侧创建边距。在这个JSfiddle您可以看到此方法适用于段落，但不适用于带有 soundcloud 嵌入的 div。在 fiddle 中，我使用“填充”而不是“边距”，以便更好地显示预期边距的区域。

如何影响带边距的 soundcloud 嵌入？

CSS 看起来像这样:

* {
margin: 0;
padding: 0;
}

.left-margin {
float: left;
height: 100vh;
padding-left: 200px;
border-style: solid;
border-color: green;
}

.right-margin {
float: right;
height: 100vh;
padding-right: 100px;
border-style: solid;
border-color: green;
}

#sc /*soundcloud*/ {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
max-width: 520px;

}

Answer 1

边距不适用于 iframe，因为您绝对定位它们。使它们在流程中。

http://jsfiddle.net/g6hk0va5/4/

HTML

<div id="content">
    <p>One morning, as Gregor Samsa was waking up from anxious dreams, he discovered that in his bed he had been changed into a monstrous verminous bug. He lay on his armour-hard back and saw, as he lifted his head up a little, his brown, arched abdomen divided up into rigid bow-like sections. From this height the blanket, just about ready to slide off completely, could hardly stay in place. His numerous legs, pitifully thin in comparison to the rest of his circumference, flickered helplessly before his eyes.</p>
<iframe width="100%" height="197" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/3829252&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>
<iframe width="100%" height="197" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/154829271&amp;auto_play=false&amp;hide_related=false&amp;show_comments=true&amp;show_user=true&amp;show_reposts=false&amp;visual=true"></iframe>

</div>

CSS

#content {
    padding: 0 100px 0 200px;
}