标签: absolute
缩放和重新定位iframe,如background-size:cover
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.sized {
height: 100%;
position: relative;
background: #eee;
overflow:hidden;
padding:0;
}
.sized iframe {
position:absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
@media (min-width: 320px) {
height: 200%;
top: -50%;
}
@media (min-width: 640px) {
height: 180%;
top: -40%;
}<div class="sized">
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
<h3>Original video</h3>
<iframe src="https://player.vimeo.com/video/135335257?autoplay=false" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>当我在片段结果中得到一个cookie相同的原始错误时,这里是一个镜像:
https://jsfiddle.net/07Lffw5x/2/embedded/result/
[编辑]也许这是一个更好的演示,如果你比较这个,没有太大的区别......为什么？[/编辑]
我正在尝试为iframe重现背景大小的封面.
事情是它似乎重新缩放视频,仅适用于更大的尺寸,
题,
重新划分可以在每个断点生效吗？或者vimeo玩家可能会自己重新缩放？
推荐指数
解决办法
查看次数
如何在绝对位置右侧放置div
我有一个页面,必须在不打扰实际页面的情况下显示动态消息框.此消息框必须出现在页面的右上角,与现有内容重叠.
我试过用,position: absolute但后来我无法将它放在右上角.我也无法使用,left因为我支持Bootstrap的响应式设计.
这是一个示例标记
<html>
<body>
<div class="container">
<!-- Need to place this div at the top right of the page-->
<div class="ajax-message">
<div class="row">
<div class="span9">
<div class="alert">
<a class="close icon icon-remove"></a>
<div class="message-content">
Some message goes here
</div>
</div>
</div>
</div>
</div>
<!-- Page contents starts here. These are dynamic-->
<div class="row">
<div class="span12 inner-col">
<h2>Documents</h2>
</div>
</div>
</div>
</body>
</html>
此消息框应具有50%相对于消息框的宽度,.container并且消息框的左侧不应与其重叠.即我们应该能够点击/选择左侧的内容.
请在这里找到样品.
请帮我解决这个问题.
推荐指数
解决办法
查看次数
如何检查路径是绝对路径还是相对路径
UNIX绝对路径以'/'开头,而Windows以字母'C:'或'\'开头.node.js是否有标准的多平台函数来检查路径是绝对路径还是相对路径？
推荐指数
解决办法
查看次数
文本环绕绝对定位的div
我知道有一些关于类似主题的问题,但它们主要是浮动div/image.我需要将图像(和div)放在绝对位置(从右到右),但我只想让文本围绕它流动.它可以工作,如果我漂浮div但我不能将它定位在我想要的地方.因为它是文本只是在图片后面流动.
<div class="post">
<div class="picture">
<a href="/user/1" title="View user profile."><img src="http://www.neatktp.com/sites/default/files/photos/BlankPortrait.jpg" alt="neatktp's picture" title="neatktp's picture" /></a></div>
<span class='print-link'></span><p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
<p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
</div>
是HTML的一个例子
CSS是:
.picture img {
background: #fff;
border: 1px #ddd solid;
padding: 2px;
float: right;
}
.post .picture {
display: block;
height: auto;
position: absolute;
right: -10px;
top: -10px;
width: auto;
}
.post {
border: 1px solid #FFF;
border-bottom: 1px solid #e8ebec;
padding: 37px 22px 11px;
position: relative;
z-index: 4;
}
这是一个Drupal主题,所以这些代码都不是我的,只是在它放置图片时它没有完全正常工作.
推荐指数
解决办法
查看次数
绝对DIV高度100%
在过去的几个小时里,我一直在研究这个问题,搜索网络和stackoverflow并没有得到太多的支持.如何制作#gradient和#holes填写整个页面？
我在Safari中使用了Inspect Element功能,当我突出显示body元素时,它不会填满整个窗口.
替代文字http://img534.imageshack.us/img534/9955/screenshot20100201at215.png
HTML:
<body>
<div id="gradient"></div>
<div id="holes"></div>
<div id="header">Header Text</div>
</body>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
body {
background-image:url(../Images/Tile.png);
background-color:#7D7D7D;
background-repeat:repeat;
}
#gradient {
background-image:url(../Images/Background.png);
background-repeat:repeat-x;
position:absolute;
top:0px;
left:0px;
height:100%;
right:0px;
}
#holes {
background-image:url(../Images/Holes.png);
background-repeat:repeat;
position:absolute;
top:2px;
left:2px;
height:100%;
right:0px;
}
#header {
background-image:url(../Images/Header.png);
background-repeat:repeat-x;
position:absolute;
top:0px;
left:0px;
width:100%;
padding-top:24px;
height:49px; /* 73 - padding */
color:rgb(113, 120, 128);
font-family:Helvetica, Arial;
font-weight:bold;
font-size:24px;
text-align:center;
text-shadow:#FFF 0px 1px 0px;
}
推荐指数
解决办法
查看次数
在两个嵌套的div之间插入垂直分隔线,而不是全高
我向左浮动并向右浮动<div>嵌套在浅蓝色框div中,如下图所示.我无法弄清楚如何在它们之间插入一条垂直线,如下图所示:
它具有以下属性:
1)我可以控制或看起来合理的任何一侧的填充/边距(即,与另一个不太接近一个div)
2)如图所示在上方和下方留下边缘,即不延伸浅蓝色div的完整垂直宽度
3)随着浏览器窗口变大/变小,蓝色框大小随之增大/减小,动态维护#1和#2
我正在寻找一个简单的,最好是仅限CSS的解决方案.
相关CSS:
#left {
position: relative;
float: left;
width: 44%;
margin: 0;
padding: 0;
}
#right {
position: relative;
float: right;
width: 49%;
margin: 0;
padding: 0;
}
#blue_box {
position: relative;
width: 45%;
min-width: 400px;
max-width: 600px;
padding: 2%;
margin-left: 40%;
overflow: auto; /*needed so that div stretches with child divs*/
}
推荐指数
解决办法
查看次数
awk中的绝对值不起作用？
我想选择第9列的绝对值小于500的文件行.列有时是正数,有时是负数.
awk -F'\t' '{ if ($9 < |500|) {print $0} }' > output.bam
到目前为止这不起作用..互联网上的一轮告诉我要使用我们应该添加的绝对值
func abs(x) { return (x<0) ? x*-1 : x }
那我怎么想把它与第9列的值一起？我不知道什么是正确的语法..
推荐指数
解决办法
查看次数
Alert表示使用不带绝对URL的弃用HREF
Facebook开发者页面中的消息提醒,我的网站目前正在使用以下不推荐使用的功能:
社交插件(如Button,Like Box),
href参数中没有绝对URL .这必须在2013年7月之前修复.
我猜它正在讨论喜欢的data-href参数,但我的按钮是用以下简单代码生成的:
data-href="http://<?php echo $_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];?>"
在浏览器中查看结果(查看HTML源代码)对我来说肯定看起来像绝对的URL.这个警报实际上试图告诉我什么？他们已经扫描的网站,有是有问题,或者只是有实际的HREF 可能会有一些？
它是指其他一些HREF参数吗？
推荐指数
解决办法
查看次数
获取执行JavaScript文件的URL(主要是IE6-7问题)
嘿所有,我一直在尝试将一个通用函数放在一起,检索网页上正在执行的JavaScript文件的绝对URL:
基本上你可以这样打电话:
getScriptName(function(url) {
console.log(url);
// http://www.example.com/myExternalJsFile.js
});
在页面上的外部JavaScript文件中,然后可以对其执行某些操作(例如,查找<script>加载它的标记).
它几乎在我测试过的所有浏览器中都很棒(至少Firefox,Chrome,Safari,Opera v10和IE 8).
但是,它似乎在IE 6和7中失败.回调函数被执行,但检索到的名称是主HTML页面的URL,而不是JavaScript文件.继续该示例,getScriptName使用参数调用回调:http://www.example.com/index.html
所以我真正想问的是,是否有其他方法可以获取当前JavaScript文件的URL(可能是IE 6和7特定的hackery)？提前致谢!
编辑:此外,这不适用于所有情况,所以请不要推荐它:
var scripts = document.getElementsByTagName("script");
return scripts[scripts.length-1].src;
我希望它适用于动态创建的脚本标记(可能不会放在页面的最后),也就是延迟加载.
推荐指数
解决办法
查看次数
jQueryUI滑块:绝对定位元素和父容器高度
我在http://jsfiddle.net/SsYwH/上有一个例子
万一它不起作用
HTML:
<div class="container">
<div class="absolute">
Testing absolute<br />
Even more testing absolute<br />
</div>
A little test<br />
</div>
CSS:
.container {
background: green;
}
.absolute {
position: absolute;
background: red;
}
问题
我使用jQuery创建一个滑块效果.要做到这一点,我需要设置绝对位置.
- 我的代码中的红色块是位置绝对滑块.
- 绿色块是容器.
我仍然希望通过它的孩子身高来设置容器.由于绝对的位置现在它不知道它.解？
推荐指数
解决办法
查看次数