我是HTML和CSS的新手,我已经寻找了一段时间的答案,但似乎什么也找不到。我有一个iframe元素,我试图定位,但每当我改变左或右属性,它实际上并没有移动。
.things1 {
position: relative;
}
.afx-vid {
position: absolute;
left: 500px;
}
<div class="things1">
<iframe class="afx-vid" width="300" height="200" src="https://www.youtube.com/embed/rndV_5q8Tkc" frameborder="0" allowfullscreen></iframe>
</div>
我知道这可能看起来像是一个愚蠢的问题,但一些帮助将不胜感激:)
3条答案
按热度按时间hk8txs481#
你的代码实际上会移动
iframe
,但这不是一个好的方法,我建议你使用flex
属性来移动你网站上的元素。flex
超级容易,它会让你的学习变得如此容易。YouTube上有大量的视频和网站解释X1 M3 N1 X是如何工作的,所以请观看它们,它会对你有帮助的。:)
以下是您的修复解决方案。只需将您当前的
css
替换为以下解决方案:您总是将
display : flex;
赋给您想要移动的元素的父元素(在本例中,您想要移动.afx-vid,而他的父元素是.things1,因此我们给予.things1显示为:弯曲;)。justify-content : center;
是声明display : flex;
时可以使用的属性之一,它基本上是在x轴上对齐项目(在本例中,他会将您的iframe对齐到页面的中心)。如果成功了,请告诉我
sd2nnvve2#
这实际上应该是一个注解,但我想通过使用代码来演示我所编写的内容,所以在这里:
当你写"每当我改变左或右属性时,它实际上并没有移动"是什么意思?
我在下面的代码片段中将
left
设置更改为200px
(这是我做的唯一更改),并且iFrame的位置 * 与原始代码片段中的不同!(它位于父代码左边界左侧200px处,而不是代码片段中的500px处)。xsuvu9jc3#
如果我没理解错的话,我也遇到过同样的问题,我有一个iFrame,我给它一个样式,给它一个class属性,在这个类的CSS中,我试图给它一个:
但是左右位置没有任何效果,iframe没有"移动"到我想要的地方。
对于使用CSS的其他类型的元素,这种方法似乎有效,但iFrame的某些特性使其与众不同。
然后,我终于发现了一个有点迂回的方法,使它的立场,因为我想通过做以下:
1.在IFrame-element的HTML中给出它:
宽度="100%"高度="100%"
上面的注解是HTML,而不是CSS
1.在HTML中,将IFrame元素 Package 在DIV中,并为该div指定一个名为"iFrameWrapper"的样式类。
现在,iFrameWrapper-DIV和IFrame-元素在其中的位置正确。
HTML看起来像这样:
摘要:使iFrame元素具有HTML属性值height ="100%" width ="100%",并将其 Package 在绝对定位的DIV中。然后使用CSS定位 Package 器div。