标签: positioning
如何在Firefox中将元素放置在其容器的底部？
我有一个表格单元格,我希望其中的div始终位于左下角.以下工作在IE和Safari罚款,但Firefox是定位div绝对的页面上,而不是电池(基于解决方案的解决方案代码中的位置).我已经使用和不使用DTD进行了测试,这使得Firefox处于Quirks模式和标准模式,并且都没有正常工作.我被困 - 任何想法？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<style type="text/css">
table { width:500px; }
th, td { vertical-align: top; border:1px solid black; position:relative; }
th { width:100px; }
.manage { text-align:right; position:absolute; bottom:0; right:0; }
</style>
</head>
<body >
<table>
<tr>
<th>Some info about the following thing and this is actually going to span a few lines</th>
<td><p>A short blurb</p><div class="manage">Edit | Delete</div></td>
</tr>
<tr>
<th>Some info …推荐指数
解决办法
查看次数
如何将LI元素定位到UL列表的底部
我有菜单项,如:Row1 Row2 .. RowN,我希望它们不要那么宽 - 这就是为什么包括休息(最大宽度)
我有这个HTML:
<div>
<ul>
<li>Row1</li>
<li>Row1 Row2 Row3</li>
<li>Row1</li>
<li>Row1 Row 2</li>
</ul>
</div>
用这个CSS:
/* MENU */
.menudiv {padding-left:10px; border-bottom: 1px solid #d0db88;}
ul.menu
{
list-style-type: none;
min-width: 1050px;
position: relative;
left:10px;
display: block;
height: 45px;
margin: 0;
padding: 0;
}
ul.menu li
{
float: left;
margin: 0;
padding: 0;
}
ul.menu li a
{
float: left;
text-decoration: none;
padding: 9px 12px 0;
font-weight: bold;
max-width:130px;
}
实际:
+--------------------+
|Row1 Row1 Row1 Row1 | …推荐指数
解决办法
查看次数
如何使用JavaScript轻松找到页面上的点与浏览器窗口底部之间的距离？
我的Web应用程序中的视图有一个可能非常长的表,因此我将其包装在div中,overflow: auto; max-height: 400px;以便用户可以滚动浏览它,同时保持页面上的其他控件可见.
我想使用一些JavaScript动态调整max-heightCSS属性,以便div延伸到浏览器窗口的底部.我该如何确定这个值？jQuery解决方案很好.
该表不会从页面顶部开始,因此我不能将高度设置为100%.
推荐指数
解决办法
查看次数
用户滚动页面后将div保持在适当位置
#div1 {
background: #ffffff;
padding: 6px;
color:#333;
font:normal 10px Arial, Helvetica, sans-serif;
text-decoration: none;
text-transform: uppercase;
position: absolute;
bottom: 20px;
right: 20px;
}
此div保持距离页面右下角20x20像素的位置.但我的网站包含一个"无限页面"分页功能,当滚动条出现在浏览器窗口上因为内容增加时,div不会保持其在右下角的位置,而是向上移动页面.即使用户滚动或出现滚动条,如何让这个div保持在右下角？谢谢
推荐指数
解决办法
查看次数
如何将div粘贴到另一个div的底部？
好的,所以这是父div:
#left {
width: 50%;
height: 100%;
background-color: #8FD1FE;
float: left;
opacity:0.75;
filter:alpha(opacity=75);
-webkit-transition: all .45s ease;
-moz-transition: all .45s ease;
transition: all .45s ease; }
这就是div里面的div:
#reasons {
background-image:url('arrow1.png');
background-repeat: no-repeat;
height: 94px;
width: 400px;
margin: 0 auto 0 auto; }
我已经尝试了一些不同的方法,但我似乎无法保持第二个div居中并坚持到第一个div的底部.
推荐指数
解决办法
查看次数
我如何在twitters bootstrap css框架内正确定位绝对div
我似乎无法使用twitter bootstrap框架获得div在其父级中的绝对位置.我有一系列遵循以下方案的行
<div id='wrapper'>
<div class='row-fluid'>
<div class='span2'>some content here</div>
<div class='span9'>other content to the side of the first div</div>
<div class='timestamp'>123456 this should align to the bottom right of wrapper</div>
</div>
</div>
CSS
.timestamp{
position:absolute;
bottom:0px;
right:0px;
}
但是时间戳div总是将自己定位到整个dom文档的主体的绝对值,忽略任何中间div.是什么原因引起了这个？
推荐指数
解决办法
查看次数
CSS定位绝对在不在Firefox中工作的表格单元格中
我无法弄清楚这个定位问题在Firefox中.它似乎没有遵循绝对定位规则.有什么我不应该这样做,但有些眉毛处理它,有些不处理？
JS小提琴:
原创 - http://jsfiddle.net/g9qzh/
更新 - http://jsfiddle.net/g9qzh/2/
适用于IE,Chrome,Safari,Opera
这是实际的代码.如果我没有遵循某些我不了解的标准,请告诉我.
HTML:
<table>
<tr>
<td>
<div id="three">Three</div>
<div id="two">Two</div>
</td>
<tr>
<tr>
<td>
<div id="three">Three</div>
<div id="two">Two</div>
</td>
<tr>
</table>
CSS:
#two {
position: absolute;
top: 0;
}
td {
position: relative;
}
我唯一的线索是,我应该分配一些其他值,td这将导致它工作.其他一些stackoverflow问题已经提到Firefox行为不端,但我还没有找到答案.我尝试将top和left值分配为零,但FF不会让步.
推荐指数
解决办法
查看次数
在固定定位中指定右边距
我不知道如何正确地标题,但这是我的问题:
我有这个布局:
<html>
<body>
<div id="content">this is my page</div>
<div id="button">magic button</div>
</body>
</html>
CSS:
#button {
position: fixed;
bottom: 20px;
background-color: #f00;
padding: 5px;
left: 50%;
margin-left: 250px;
}
html, body{
height: 100%;
}
#content {
margin: 0 auto;
width: 700px;
min-height: 100%;
background-color: #eee;
}?
请看这里的小提琴:http://jsfiddle.net/n6UPF/
我的页面正常工作,按钮就在我想要的位置.
但是,如果我更改按钮上的文字,它将不再正确定位.
我想将其定位为相对于我的内容区域的右边缘"固定".
这可以在纯CSS中完成吗？
推荐指数
解决办法
查看次数
水平定位div元素,而不是垂直定位
我正在设计一个导航栏; 其中的标签链接由CSS形状制成.为此我position: absolute在子元素上使用了很多,并且我将父容器设置为position: relative.我也设置了一个坚硬的高度和足够的宽度,它将无法正常工作.甚至没有使用overflow: ...无论如何,我的标签框垂直放置.
我不知道这一点.
"navBox"类div中的div有position: absolute.
单击此处(jsfiddle)获取HTML和CSS代码,并观察输出结果.
提前致谢
推荐指数
解决办法
查看次数
Bootstrap模态由于定位导航条而变黑
当我的Bootstrap模态显示时,它看起来像是在黑色背景后面.单击屏幕上的任意位置会导致模态消失.
这个问题似乎是由我的导航栏定位造成的 - 删除position: absolute;或position: relative;修复它.不幸的是,由于我需要在导航栏上使用z-index,我无法摆脱定位.
为什么导航栏的位置导致模态被遮挡？有没有办法让模态出现在背景前面,同时保持导航栏上的定位？
推荐指数
解决办法
查看次数
标签 统计
positioning ×10
css ×9
html ×6
absolute ×1
css-position ×1
css3 ×1
dimensions ×1
firefox ×1
html-lists ×1
javascript ×1
jquery ×1
layout ×1
position ×1
scroll ×1