我有以下HTML:
<html>
<head>
<style>
.part { background-color: blue; width: 40%; float: right; }
</style>
</head>
<body>
<div>
<div class="part">Hello World 1 </div>
<div class="part">Hello World 2</div>
<div class="part">Hello World 3</div>
<div class="part">Hello World 4</div>
</div>
</body>
</html>
现在,文本向右(好)和向下(坏)流动.是否有可能向右和向上流动？
当前版本如下:
[Hello World 1][Hello World 2]
[Hello World 3][Hello World 4]
最终版本应如下所示:
[Hello World 3][Hello World 4]
[Hello World 1][Hello World 2]
一个稍微厚颜无耻的方法是将外部div和内部div旋转180度.
旋转外部div意味着元素是颠倒的,但按照您想要的顺序显示.
旋转内部div将使它们以正确的方式向上移动,同时保持它们的顺序相反.
整个代码就像这样简单:
.outer, .part {
transform:rotate(180deg);
}
是的,这是一个非常非常厚颜无耻的黑客.就处理能力而言,它当然没有效率.它只是感觉不对.但是你知道......它有效.
在这里它是一个小提琴:http://jsfiddle.net/zW4TR/
(注意:transform某些浏览器的样式可能需要供应商前缀,并且还注意它在IE8或更早版本中不起作用,因为它不支持变换.(有一种在IE8中旋转的方式,但它很漂亮丑陋和古怪,我会担心他们在旋转内旋转的效果如何