Question

我使用div在页面的左侧和右侧创建边距。在此JSfiddle中，您可以看到此方法适用于段落，但不适用于带有soundcloud嵌入的div。在小提琴中，我使用填充＆＃39;而不是＆＃39; margin＆＃39;为了更好地显示预期边距的区域。

如何影响带有边距的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;
}

边距不影响soundcloud div

1 个答案: