相关疑难解决方法(0)
为什么此页面的内容会向左/右移几个像素？
我正在使用"中心页眉/页脚/ 2列CSS"布局.
在test1.htm中,如果它们是最小页面内容并且页面页脚在浏览器窗口中完全可见,那么当您单击test2.htm时,页面内容将向左移动.
如果test1.htm有足够的内容将页脚推离浏览器窗口的底部,那么当您单击test2.htm时,页面内容将保持静态.
任何人都可以帮助解决这个问题吗？
test1.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
body, html
{
margin:0;
padding:0;
font-size: 1em;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#wrap
{
width:912px;
margin:0 auto;
background:Green;
}
#header
{
background-color:Gray;
height: 120px;
}
#leftColumn
{
float:left;
width:230px;
padding: 0 10px 10px 10px;
background:Red;
}
#rightColumn
{
float:right;
width:642px;
padding:10px;
background:#fff;
font-size: 0.7em;
color: #828589;
}
#footer
{
clear:both;
padding:5px 10px;
background-color:Gray;
}
</style>
</head>
<body>
<div …4
推荐指数
推荐指数
1
解决办法
解决办法
2万
查看次数
查看次数
如何将 DIV 放在所有页面的顶部和中间？
我有一个带有 aform和 a的页面div：
<body>
<form id="form1" runat="server">
...
</form>
<div id="wizardDiv" style="width: 100%; height: 100%;background-color:black;display:none">
<div style="background-color:#8DA5C6; z-index:999; width: 50%; margin: 0 auto;">
...
</div>
</div>
</body>
单击按钮时，我使div可见，并且我希望它覆盖整个页面，而内部div正好位于中间（在中心，水平和垂直。）就像一个弹出式 modal。
举例说明：
当前的 html 失败如下：
- The
div不覆盖整个页面，它位于 之后form，而是覆盖它。 - 内部
div仅水平居中，而不是垂直居中。
我在这里缺少什么？
我的方法是“浏览器兼容性”安全吗？（也许我应该寻找 Jquery 解决方案？）
最终解决方案：
我最终使用了：
- Didier G 回答了叠加问题。
- Jquery将 div 居中显示在屏幕上
- 用于圆角 div 角的CSS3
2
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
当前屏幕位置的中心位置
是否可以选择找到实际屏幕位置的中心位置（顶部和左侧）？
我的主要目标是在屏幕中央显示 div，无论我在哪里滚动或点击
2
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
水平和垂直中心模态Div IE问题
我正试图在div中水平和垂直居中一个模态窗口.我希望它与浏览器兼容.您可以从下面的图片中看到,当我调整IE8的大小时,然后单击"显示模态"按钮,它显示的不是完全水平居中.这似乎不是Chrome的问题.有什么想法吗？你们怎么做到这一点？
<html>
<head>
<title>test</title>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#modal').click(function() {
// overlay
$('<div id="overlay" />').css({
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
backgroundColor: 'black',
opacity: 0
}).appendTo('body');
$('<div id="datamodal" />').css({
backgroundColor: '#FFFFFF',
border: '10px solid #999',
height: '200px',
width: '600px',
position: 'absolute',
top: '50%',
left: '50%',
marginTop: '-120px',
marginLeft: '-320px',
color: '#111111',
fontWeight: 'bold',
padding: '10px',
display: 'none'
}).append('<input type="text" />').appendTo('#overlay');
$('#overlay').fadeTo(300, 0.7);
$('#datamodal').fadeIn(300); …1
推荐指数
推荐指数
1
解决办法
解决办法
9723
查看次数
查看次数
如何找到屏幕的中心？
我有一个div,我需要在屏幕中央显示这个div(即可视区域),即使用户滚动页面也是如此.
所以它的风格应该是(例如)
{position:fixed; top:90px; left:150 px; z-index:9999; overflow:hidden;}
现在我需要找到left和top的值,这样div就会放在屏幕的中心(即可视区域),对于任何页面.
如何使用javascript或jquery找到left&top的值？
0
推荐指数
推荐指数
1
解决办法
解决办法
4416
查看次数
查看次数
Div中的CSS中心图像
我需要构建一个宽度为1600像素的高分辨率图像的网站,无论浏览器屏幕尺寸如何,我都需要在屏幕上居中.
这些图像的设计使它们看起来很好,中心到1024 px,但需要始终显示从中心固定而不是顶部和左侧.
有没有人有一个解决方案 - 理想情况下,它适合图像的内联和后台版本!？
CSS3解决方案很好,因为我的目标是ie8 plus.
0
推荐指数
推荐指数
1
解决办法
解决办法
300
查看次数
查看次数
Xpages Bootstrap Modal-如何使其可拖动
我在Domino服务器上使用bootstrapResponsiveConfiguration：9.0.1 FP6和Ext Lib版本-ExtensionLibraryOpenNTF-901v00_17.20160428-0214
对话框控件（引导程序中为Modal）不可拖动。如何使对话框控件可拖动？
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
<xe:applicationLayout id="applicationLayout1">
<xp:panel>
<xp:button id="button1" styleClass="btn-primary" value="Show Dialog">
<i class="fa fa-user" />
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[//getComponent("dialog1").show();
XSP.openDialog("#{id:dialog1}")]]></xp:this.script>
</xp:eventHandler>
</xp:button>
<xe:dialog id="dialog1" title="Dialog Title">
<xe:this.onShow>
<![CDATA[$(".xsp-responsive-modal").removeClass("xsp-responsive-modal").addClass("my-responsive-modal");]]>
</xe:this.onShow>
<xp:table>
<xp:tr>
<xp:td>
<xp:label value="Label"></xp:label>
</xp:td>
<xp:td>
<xp:inputText></xp:inputText>
</xp:td>
</xp:tr>
</xp:table>
<xe:dialogButtonBar>
<xp:button value="Cancel"></xp:button>
<xp:button value="Save" styleClass="btn-primary"></xp:button>
</xe:dialogButtonBar>
</xe:dialog>
</xp:panel>
<xp:this.facets>
<xe:navigator id="navigator1" xp:key="LeftColumn">
<xe:this.treeNodes>
<xe:basicLeafNode label="Link 1"></xe:basicLeafNode>
<xe:basicLeafNode label="Link 2"></xe:basicLeafNode>
</xe:this.treeNodes>
</xe:navigator>
</xp:this.facets>
<xe:this.configuration>
<xe:bootstrapResponsiveConfiguration productLogo="/car.png"
placeBarName="New Application Name" placeBar="true" titleBar="false"
invertedNavbar="true" collapseLeftColumn="true" …0
推荐指数
推荐指数
1
解决办法
解决办法
239
查看次数
查看次数