div内容显示问题？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了div内容显示问题？相关的知识，希望对你有一定的参考价值。
请问怎样控制div块内容在客户端的显示位置，既在屏幕上的显示位置。
如：div块w内有内容111,编辑端111处于W块的左上方，用浏览器浏览时要111显示于W块的右下方或居右且向下两格显示等。请高手帮忙！谢谢
呵呵，朋友还是没有明白我的意思。
我的前提是不可以用margin、border、padding、text-align等命令来设置编辑端的显示位置，既固定编辑端的位置再来设置客户端(屏幕)的位置。
如下面这段代码我要111显示在222的下面，但<bood>标签内的内容不可以做任何改动。
代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div块内容显示位置设置</title>
<style type="text/css">
#w
width:200px;
height:200px;
text-align:left;
background-color:#CCCCCC;
</style>
</head>
<body>
<div id="w">
<div>111</div>
<div>222</div>
</div>
</body>
</html>
不一定要用CSS控制哦
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div块内容显示位置设置</title>
<style type="text/css">
#w
position:relative;
width:200px;
height:200px;
text-align:left;
background-color:#CC0000;
.x1,.x2position:absolute; bottom:5px;background-color:#ff00CC;
.x1right:40px;
.x2right:5px;
</style>
</head>
<body>
<div id="w">
<div class="x1">111</div>
<div class="x2">222</div>
</div>
</body>
</html>
有一个东西，我改写了下，查看下效果，你会喜欢的。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>块内容互换</title>
</head>
<body>
<div id='myDiv'>
<div style='width:400px;height:100px;background-color:#FF0000'>
</div>
<div style='width:400px;height:100px;background-color:#FFFF00'>
<div>你好,第二个<a href="http://zjc.ncu.cn/fws">x</a></div>
</div>
<div style='width:400px;height:100px;background-color:#0099FF'>
第三个
</div>
<div style='width:400px;height:100px;background-color:#9900FF'>
四个
</div>
<div style='width:400px;height:100px;background-color:#9966FF'>
第五个
</div>
<div style='width:400px;height:100px;background-color:#eeccfe'>
第N个,想加多少就加多少吧
</div>
</div>
<script>
function moveUp(obj)
var o=obj.parentElement
var t=o.previousSibling;
o.parentElement.removeChild(t);
o.insertAdjacentElement("afterEnd",t);
if(o.parentElement.firstChild==o)
var tt=o.removeChild(o.lastChild.previousSibling);
t.lastChild.insertAdjacentElement("beforeBegin",tt);
if(o.parentElement.lastChild.previousSibling==o)
var tt=o.nextSibling.removeChild(o.nextSibling.lastChild);
o.lastChild.insertAdjacentElement("beforeBegin",tt);
function moveDown(obj)
var o=obj.parentElement
var t=o.nextSibling;
o.parentElement.removeChild(t);
o.insertAdjacentElement("beforeBegin",t);
if(o.parentElement.lastChild==o)
var tt=o.removeChild(o.lastChild);
t.lastChild.insertAdjacentElement("afterEnd",tt);
if(o.parentElement.firstChild.nextSibling==o)
var tt=o.previousSibling.removeChild(o.previousSibling.lastChild.previousSibling);
t.lastChild.insertAdjacentElement("afterEnd",tt);
function syncPos()
var i;
for(i=1;i<divCount;i++)myDiv.childNodes[i].insertAdjacentHTML("beforeEnd",P);
for(i=0;i<divCount-1;i++)myDiv.childNodes[i].insertAdjacentHTML("beforeEnd",N);
var myDiv = document.getElementById('myDiv');
var divCount=myDiv.childNodes.length;
var P="<span style='cursor:hand' onclick='moveUp(this)'>向上</span>"
var N="<span style='cursor:hand' onclick='moveDown(this)'>向下</span>";
syncPos();
</script> </body>
</html>
要是回答的内容有问题，或认为不妥，请发送百度消息给我，消息内容加上本页网址哦。。
· 参考技术A 问题都没看明白，你这样谁知道你要的效果，最好是有效果图。更好的是要有结构代码。表现的代码最好也有（CSS）。你给个图我就帮你搞定 参考技术B margin、border、padding、text-align
没有这些 貌似CSS也就没有控制位置的方法了吧~~~
关于div的滚动条滚动到底部，内容显示不全的问题。（已解决）
今天我做了一个带有滚动条，底部有两个按钮的div。 当我拖动滚动条到底部， 按钮没有显示出来。 我看了看我的样式设置，是这样的：
/* 内容样式 */ #contentPartDiv{ position:fixed; top:4em; bottom:0; width:100%; height:100%; overflow-y:auto; }
这个意思是 内容的位置固定， 高度占满剩余的部分，自动滚动。 为此没必要设置高度height， 所以我去掉它。 然后重启页面，好了， 而且不管我怎么修改内容中的纵向间距， 都能滚动到按钮处。
以上是关于div内容显示问题？的主要内容，如果未能解决你的问题，请参考以下文章
jquery detach 重新显示 div 内容时遇到问题