如何让源代码顺序在后的网页内容在页面上显示在前

ganerhane 2013-03-14 01:24:30

各位大神好，请教大家一个问题，在页面布局中，如果让源码顺序在后的内容在页面显示上能显示到前面？
例如
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<div id="1" style="width:100px;">
<p>body 元素的内容会显示在浏览器中。title 元素的内容会显示在浏览器的标题栏中。</p>
<div id="2" style="float:right;width:20px;height:20px;background-color:red">
后
</div>
</div>
</body>
</html>
显示效果如下

我如何能让这个小红块显示在右上角，也就是变成这样：

当然前提是源码顺序不变。

谢谢大家！

...全文

306 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

ganerhane 2013-03-14

打赏
举报

引用 7 楼 calmcrime 的回复:

明白你的意思了如果照你的写法 p 独占了一行 div 独占一行且float right，与p毫无关系要实现你贴图的样子，得交换顺序 XML/HTML code?12345678910111213141516171819<!doctype html><html><head><title>我的第一个 HTML 页面</title><sty……

谢谢你！我知道如果按照正常代码顺序和显示顺序该怎么实现，我现在要实现的就是代码顺序和显示的顺序相反。。。您可以看一下这个页面http://www.jishuzh.com/web/wp/%E4%BB%A3%E7%A0%81%E5%AE%9E%E7%8E%B0%E6%B7%BB%E5%8A%A0wordpress%E6%96%87%E7%AB%A0%E7%9B%AE%E5%BD%95.html 我希望把文章块中 “正文索引” 这一块的代码放在文章的代码的后面，但是显示要跟现在的显示效果一样。谢谢！

001007009 2013-03-14

打赏
举报

明白你的意思了如果照你的写法 p 独占了一行 div 独占一行且float right，与p毫无关系要实现你贴图的样子，得交换顺序

<!doctype html>
<html>
<head>
<title>我的第一个 HTML 页面</title>
<style type="text/css">
	* { margin:0; padding:0; font-size:12px; }
</style>
</head>
<body>
<div id="1" style="width:100px;">
	<div id="2" style="float:right;width:20px;height:20px;background-color:red">
		后
	</div>
	<p>
		body 元素的内容会显示在浏览器中。title 元素的内容会显示在浏览器的标题栏中。
	</p>
</div>
</body>
</html>

参考下 http://www.w3school.com.cn/css/pr_class_float.asp

ganerhane 2013-03-14

打赏
举报

引用 5 楼 calmcrime 的回复:

参考下
http://www.w3school.com.cn/css/pr_class_position.asp

设置 right

你说的设置right是对id为1的框设置吗？这样应该只会使整个框里的内容左移

但是我要的效果是是这样的

我感觉应该不是只设置right就能实现呢

谢谢。

001007009 2013-03-14

打赏
举报

参考下 http://www.w3school.com.cn/css/pr_class_position.asp 设置 right

ganerhane 2013-03-14

打赏
举报

引用 2 楼 athrunzero 的回复:

可以用定位来做。position:absolute;top:0;right:0;

谢谢你！请看3楼，这样改怎么实现呢？

ganerhane 2013-03-14

打赏
举报

引用 1 楼 calmcrime 的回复:

<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<div id="1" style="width:100px; position:relative;">
<p>body 元素的内容会显示在浏览器中。title 元素的内容会显示在浏览器的标题栏中。</p>
<div id="2" style=……

谢谢你！
我测试了一下，显示效果是这样的：

我需要的效果是这个红色块的内容得把文字排斥开，也就是不能遮掉前一个块的内容。该怎么实现呢？谢谢！

athrunzero 2013-03-14

打赏
举报

可以用定位来做。position:absolute;top:0;right:0;

001007009 2013-03-14

打赏
举报

<html> <head> <title>我的第一个 HTML 页面</title> </head> <body> <div id="1" style="width:100px; position:relative;"> <p>body 元素的内容会显示在浏览器中。title 元素的内容会显示在浏览器的标题栏中。</p> <div id="2" style="position:absolute;top:0; right:0;;width:20px;height:20px;background-color:red"> 后 </div> </div> </body> </html>

痞子wu情 2013-03-14

打赏
举报

引用 1 楼 calmcrime 的回复:

<html> <head> <title>我的第一个 HTML 页面</title> </head> <body> <div id="1" style="width:100px; position:relative;"> <p>body 元素的内容会显示在浏览器中。title 元素的内容会显示在浏览器的标题栏中。</p> <div id="2" style=……

+1 绝对定位和相对定位

ganerhane 2013-03-14