Jit*_*yas 5 css xhtml css-float
请参阅此示例以了解
alt text http://easycaptures.com/fs/uploaded/212/8042227539.png
这是示例代码
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
div {width:300px;height:42px;border:2px solid red}
a{border:2px solid blue;padding:10px}
div a {float:right}
#div2 a {float:left}
</style>
</head>
<body>
I need positioning in right like this
<p>div a {float:right}</p>
<div >
<a>A</a>
<a>B</a>
</div>
but element order like this without changing in HTML code
<div id="div2">
<a>A</a>
<a>B</a>
</div>
如果您可以编辑CMS模板,请将它们包装在一个额外的div中,然后浮动该div:http://jsbin.com/esoqe
div.els { float:right }
<div class="main">
<div class="els">
<a>A</a>
<a>B</a>
</div>
</div>
如果您无法对代码进行类似的微小更改,则可以在页面完成加载后使用Javascript重新排序.
$(function(){
// create previous hierarchy
$("div.main").wrapInner("<div class='els'></div>");
});
最后一个选项(我甚至称它为一个选项让我不寒而栗)是绝对定位每个div,确保将其父容器位置设置为relative*.每次添加新框时,此选项都要求您返回并更改.css文件,这是不幸的.
*如果您无法为其父级或相同维度的父级设置规则,则会从表中删除此选项,因为绝对定位将默认为视口,这不是您想要的.