个人中心
gpt4 book ai didi

html - 如何在 CSS 中为 iframe 正确实现 margin-left？

转载 作者：行者123 更新时间：2023-12-04 08:38:36 25 4
gpt4 key购买 nike

我正在尝试使用 margin-left 分隔这两个 iframe。然而，他们继续坚持在一起。我试图在 row1 中实现 margin-left id 以及 float-childer在我下面的代码段中的类，但是没有成功。

.float-childer {
  float: left;
}
#row1 {
  margin-top: 10px;
  margin-left: 10px;
}
<!doctype html>
<html lang="en">
<body>
    <div id="row1">
        <div class="float-childer">
            <iframe width="150%" height="70" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/759501001&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
            <div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;">
                <a href="https://soundcloud.com/guapodraco" title="DracoFromLS" target="_blank" style="color: orange; text-decoration: none;">DracoFromLS</a> · <a href="https://soundcloud.com/guapodraco/guapo-draco-king-of-los-santos" title="Draco - King Of Los Santos"
                target="_blank" style="color: orange; text-decoration: none;">Draco - King Of Los Santos</a>
            </div>
        </div>
        <div class="float-childer">
            <iframe width="150%" height="70" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/891262120&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
            <div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;">
                <a href="https://soundcloud.com/guapodraco" title="DracoFromLS" target="_blank" style="color: orange; text-decoration: none;">DracoFromLS</a> · <a href="https://soundcloud.com/guapodraco/draco-fredo" title="DRACO - Fredo" target="_blank"
                style="color: orange; text-decoration: none;">DRACO - Fredo</a>
            </div>
        </div>
    </div>
</body>
</html>

最佳答案

希望这是你正在寻找的。

.float-childer {
  float: left;
}
#row1 {
  margin-top: 10px;
}
.float-childer2 {
  margin-left: 10px;
}
<!doctype html>
<html lang="en">
<body>
    <div id="row1">
        <div class="float-childer float-childer1">
            <iframe width="100%" height="70" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/759501001&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
            <div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;">
                <a href="https://soundcloud.com/guapodraco" title="DracoFromLS" target="_blank" style="color: orange; text-decoration: none;">DracoFromLS</a> · <a href="https://soundcloud.com/guapodraco/guapo-draco-king-of-los-santos" title="Draco - King Of Los Santos"
                target="_blank" style="color: orange; text-decoration: none;">Draco - King Of Los Santos</a>
            </div>
        </div>
        <div class="float-childer float-childer2">
            <iframe width="100%" height="70" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/891262120&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
            <div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;">
                <a href="https://soundcloud.com/guapodraco" title="DracoFromLS" target="_blank" style="color: orange; text-decoration: none;">DracoFromLS</a> · <a href="https://soundcloud.com/guapodraco/draco-fredo" title="DRACO - Fredo" target="_blank"
                style="color: orange; text-decoration: none;">DRACO - Fredo</a>
            </div>
        </div>
    </div>
</body>
</html>

关于html - 如何在 CSS 中为 iframe 正确实现 margin-left？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64677170/

25 4 0
文章推荐： react-native - Android 模拟器未在 vs 代码中打开
文章推荐： R正则表达式从文本文件中提取电视节目名称
文章推荐： awk - 从字段中删除特定单词
文章推荐： python-3.x - 如何使用python提取HTML文档的 'alt'值？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com