Question

我有以下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]

Answer 1

一种稍微厚颜无耻的方法是将外部div和内部div旋转180度。

旋转外部div意味着元素是颠倒的，但按照您想要的顺序显示。

旋转内部div将使它们以正确的方式向上移动，同时保持它们的顺序相反。

整个代码就像这样简单：

.outer, .part {
    transform:rotate(180deg);
}

是的，这是一个非常非常厚颜无耻的黑客攻击。它在处理能力方面肯定没有效率。它感觉错误。但是你知道......它有效。

这里有一个小提琴：http://jsfiddle.net/zW4TR/

（注意：对于某些浏览器，您可能需要transform样式的供应商前缀，并且还注意到它不能在IE8或更早版本中工作，因为它不支持转换。是一种在IE8中旋转的方式，但它非常丑陋和古怪，我会担心它们在旋转中旋转的效果如何）

Answer 2

您可以在不修改标记的情况下执行此操作，但支持非常有限，因为只有3个浏览器支持Flexbox中的包装：Opera，Chrome，IE10。

CODEPEN

为简单起见，在这里添加了一个类：

<div class="container">
    <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>

CSS：

.container {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap-reverse;
  -ms-flex-wrap: wrap-reverse;
  flex-wrap: wrap-reverse;
}
@supports (flex-wrap: wrap) {
  .container {
    display: flex;
  }
}

.part {
  -webkit-flex: 1 50%;
  -ms-flex: 1 50%;
  flex: 1 50%;
}

Answer 3

这是我工作的解决方案。这是一个混乱的解决方案 - 它使用绝对定位，：第n个元素，基于像素的边距和!important标记来覆盖内联样式。

但是，根本不需要更改HTML标记。这一切都可以通过链接的样式表来实现。

这是CSS：

div {
  position: relative;
  width: 50%;
  float: right;
}

.part {
  width: inherit !important;
}

.part:nth-child(1),
.part:nth-child(2) {
  float: left;
  margin-top: 20px;
}

.part:nth-child(3),
.part:nth-child(4){
  position: absolute;
  float: left;
}

.part:nth-child(4) {
  right: 0;
}

Answer 4

我自己尝试了你的代码，似乎它正常工作。元素1和2位于上侧（在chrome和firefox上测试）。

但是，这里有一些可能的解决方案：

最简单的方法是更改元素的顺序：

<div>
     <div class="part">Hello World 3</div>
     <div class="part">Hello World 4</div>
     <div class="part">Hello World 1 </div>
     <div class="part">Hello World 2</div>
</div>

但我猜这不是你想要的。

另一个解决方案是将div放在另一个parent-div中：

<div>
     <div class="part">Hello World 1 </div>
     <div class="part">Hello World 2</div>
</div>
<div>
     <div class="part">Hello World 3</div>
     <div class="part">Hello World 4</div>
</div>

如果您无法更改HTML代码，可能会有一些特殊的CSS3选择器，但我无法测试它，因为它已经在为我工作了。

是否可以使用CSS流式传输HTML元素？

4 个答案: