标签: positioning
推荐指数
解决办法
查看次数
jQuery:如何检查元素是否超出浏览器窗口的大小,以及如何重新定位它
我有这个代码:
var pos = $(this).offset();
var width = $(this).width();
userPreviewCon.css({
left: (pos.left + 30) + 'px',
top: (pos.top + 15) + 'px'
}).fadeIn();
...用于相对于鼠标指向的元素定位弹出窗口.
但是当一个元素靠近窗口的边框时,某些工具提示是不可见的,因为它的一部分超出了窗口大小.问题是:如何重新定位工具提示不再超出窗口的边框？
推荐指数
解决办法
查看次数
如何垂直和水平居中DIV？
我的背景图像的行为是,当我调整浏览器窗口大小时,图像总是完全居中.它在顶部,左侧,右侧和底部与浏览器窗口的边缘相同的"距离".
CSS:
background-image: url("ipad.jpg");
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 563.5px 800px;
我有一个div覆盖这个图像,我希望它的行为方式与背景图像相同,因此它始终位于同一位置的背景图像上方.
这甚至可能吗？如果是的话.怎么样？我希望你明白我想要实现的目标.:) 非常感谢您的帮助.:d
推荐指数
解决办法
查看次数
我需要一个div来坐在另一个div的角落里,而不是另一个div
HTML
<body onload="MM_preloadImages('images/enterroll.gif')">
<div id="wrapper">
<div id="enterlogo"><img src="images/entrylogo.gif" width="600" height="600" alt="enterlogo" /></div>
<div id="enter"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('enter','','images/enterroll.gif',1)"><img src="images/enter.gif" alt="enter" name="enter" width="300" height="300" border="0" id="enter2" /></a></div>
</div>
</body>
CSS
body {
background-color: #CCC;
}
#wrapper {
height: 750px;
width: 750px;
}
#enterlogo {
height: 600px;
width: 600px;
margin-top: 10%;
margin-left: auto;
margin-right: auto;
}
#enter {
height: 300px;
width: 300px;
}
所以我真正需要做的就是让div div位于包装器div的右下角.
为此,我需要它覆盖enterlogo div!我已经查找了许多关于z-index和定位方法的帖子,并且浮动权限正确,但所有这些帖子似乎都不尽如人意.
任何帮助都会受到赞赏,我打电话给朋友,他说将enterlogo div中的图像作为背景并将其他图像放入该div可能会有所帮助..我看不出它会如何工作!
PS翻转图像将成为一个链接,这将是页面上唯一的div片段.
推荐指数
解决办法
查看次数
固定元素上的Jquery UI .position()
Jquery UI的.position()函数似乎在滚动时固定的元素上被破坏了.例如,我试图在页面顶部(如标题)的固定元素的"中心顶部"放置一个新元素(下面的演示中的蓝色块).我期望.position()中的碰撞检测会将元素翻转到"中心底部".它是第一次工作,但是如果有人在页面向下滚动部分,它就完全坏了.
这是一个演示:http://jsfiddle.net/lrocksmashtime/MJwdP/
要查看效果,请在未滚动结果窗口时单击"单击",然后在滚动一点后再次单击它.
推荐指数
解决办法
查看次数
使用jQuery在类的每个实例上添加随机CSS
我需要做的是为.project_content我的HTML中的每个实例添加三种CSS样式中的一种,并且需要为每个实例随机选择样式.
三个样式如下:
float:left
float:rightOR
margin:auto+ width:x(其中的宽度.project_content被计算并且x是所计算出的宽度)
现在我有这个:
<script type="text/javascript">
$(document).ready(function(){
var floats = ["right","left"];
var rand = Math.floor(Math.random()*floats.length);
$('.project_content').css("float", floats[rand]);
});?????????????
</script>
所有这个脚本正在为我做的是应用float:left或float:right所有实例.project_content而不是为每个实例选择右或左.
如何让我的脚本为每个实例选择一个随机变量project_content,如何将margin:auto+计算添加width到混合中？非常感谢.
推荐指数
解决办法
查看次数
隐藏水平CSS菜单溢出
我在http://www.stevemoorecpa.dreamhosters.com/上有一个水平下拉CSS菜单
我的问题是菜单宽度扩展到网站的包装外,我无法隐藏它.
如何防止元素超出网站包装？这是包装器的代码......
#wrapperSkm {
border-left-style: solid;
border-right-style:solid;
border-width: 2px;
border-color: transparent;
-moz-box-shadow: 0px 0px 25px #c3c3c3;
-webkit-box-shadow: 0px 0px 25px #c3c3c3;
box-shadow: 0px 0px 25px #c3c3c3;
width:1069px;
overflow: hidden;
padding: 0 0px 0 0px;
margin-left: auto;
margin-right: auto;
background:url(images/line1Right.png) repeat-x right 134px;
}
这是水平子菜单导航的代码
#access ul ul {
display: none;
float: right;
margin: 0;
position: absolute;
top: 181px;
left: 0;
width:100%;
background:#fff url(images/line1Nav.png) repeat-x bottom;
z-index: 99999;
text-align:center;
}
我一整天都在这里工作,没有任何东西可以让菜单隐藏它在主站点包装器之外的溢出.
所有帮助表示赞赏.
推荐指数
解决办法
查看次数
如何纠正div重叠标题
编辑:添加jsFiddle:http://jsfiddle.net/gdHuh/
在我的页面上有一个带有底部边框的标题.标题和边框之间有填充.在标题区域右侧浮动,触摸底部边框,是一个搜索框.这是它的样子:
但是,当标题和搜索框文本太长时,标题文本的一部分将被搜索框隐藏:
这就是我希望它在这样的情况下看起来像:
这是我的HTML:
<div class="row">
<div class="column column8">
<h1>Internship Reviews & Rankings</h1>
</div>
<div class="findTop column column8">
<div class="greyShaded findTab">
<img class="verticalBottom" src="images/blueMagnify.png"/>
<a>Find an Internship Program</a>
<img class="verticalTextTop" src="images/greyArrowheadRight.png"/>
</div>
</div>
</div>
和CSS:
/* More Specific CSS */
.findTab{
float: right;
margin: 0px 5px;
padding: 5px 10px;
font-weight: bold;
line-height: 24px;
border-left: 1px solid #ddd;
border-top: 1px solid #ddd;
border-right: 1px solid #ddd;
background-color: #f5f5f5;
font-family: "Helvetica Neue", arial, helvetica, sans-serif;
font-size: 13px; …推荐指数
解决办法
查看次数
将6+个div与每行3个div对齐
所以我必须在包装div中对齐一些div.这是代码:
<div id="tiles-wrapper">
<div class="tile">asdfasdf</div>
<div class="tile">asdfas</div>
<div class="tile">asdf</div>
<div class="tile">asdfasdf</div>
<div class="tile">asdfas</div>
<div class="tile">asdf</div>
</div>
这是我的CSS代码:
/* TILES */
#tiles-wrapper{
position: relative;
margin-top: 20px;
width: 960px;
overflow: hidden;
}
.tile{
width: 300px;
height: 200px;
margin-bottom: 20px;
float: left;
overflow: hidden;
background-color: aqua;
}
我需要在一行中有3个div.每行中的第一个和最后一个div必须放在包装器div的边界处,没有任何填充或边距.每行中的第二个div应该以左侧和右侧的一些边距为中心.
问题是我的html内容中不能有行.我需要把所有的divs排在一起.
div应该像这样定位:
|[1]------[2]-------[3]|
|[4]------[5]-------[6]|
|[7]------[8]-------[9]|
...
有没有一个很好的CSS或JS方法来做到这一点？
这是小提琴:http://jsfiddle.net/STS5F/5
推荐指数
解决办法
查看次数
CSS:保证金权利和绝对定位
我在页面中有一个div.现在,当我将其位置指定为绝对位置并给出margin-left == 20px时:
我明白那个.div元素应该向右移动20 px,这样你就可以在div和body之间存在20px的边距.
现在,当我从右侧提供20px的边距时,不应该整个div向右侧移动,与身体的间隙为20px.
.container{
position: absolute;
background-color:gray;
margin-right: 50px;
height: 200px;
}
我知道我可以定位div给出左右两个值.但真正的问题是保证金留下工作但保证金权利不行!这是什么原因？帮助赞赏!
推荐指数
解决办法
查看次数
标签 统计
positioning ×10
css ×8
html ×4
jquery ×2
background ×1
css-position ×1
javascript ×1
jquery-ui ×1
popup ×1
random ×1
window ×1