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

Question

I have the following piece of HTML: 我有以下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>

Right now the text is flowing to the right (good) and down (bad). 现在，文本向右（好）和向下（坏）流动。 Is it possible to flow to the right and up? 是否有可能向右和向上流动？

The current version looks like: 当前版本如下：

[Hello World 1][Hello World 2]
[Hello World 3][Hello World 4]

The final version should look like: 最终版本应如下所示：

[Hello World 3][Hello World 4]
[Hello World 1][Hello World 2]

Answer 1

One slightly cheeky way to do this would be to rotate both the outer div and the inner divs by 180 degrees. 一个稍微厚颜无耻的方法是将外部div和内部div旋转180度。

Rotating the outer div will mean the elements are upside-down but shown in the order you want them. 旋转外部div意味着元素是颠倒的，但按照您想要的顺序显示。

Rotating the inner divs will put them back the right way up while keeping them in the reverse order. 旋转内部div将使它们以正确的方式向上移动，同时保持它们的顺序相反。

The whole code is as simple as this: 整个代码就像这样简单：

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

Yes, it's a very very cheeky hack. 是的，这是一个非常非常厚颜无耻的黑客。 It's certainly not efficient in terms of processing power. 就处理能力而言，它当然没有效率。 And it just feels wrong . 它只是感觉不对。 But you know... it works. 但是你知道......它有效。

Here it is in action in a fiddle: http://jsfiddle.net/zW4TR/ 在这里它是一个小提琴： http ： //jsfiddle.net/zW4TR/

(note: you may need vendor prefixes on the transform style for some browsers, and also note that it won't work in IE8 or earlier as it doesn't support transforms. (there is a way of rotating in IE8, but it it's pretty ugly and quirky, and I would worry about how well they'd work with rotations inside rotations) （注意：对于某些浏览器，您可能需要在transform样式上使用供应商前缀，并且还注意它在IE8或更早版本中不起作用，因为它不支持转换。（在IE8中有一种旋转方式，但它是非常丑陋和古怪，我会担心他们在旋转内旋转的效果如何

Answer 2

You can do this without modifying your markup, but support is extremely limited due to the fact that only 3 browsers support wrapping in Flexbox: Opera, Chrome, IE10. 您可以在不修改标记的情况下执行此操作，但由于只有3个浏览器支持Flexbox中的包装，因此支持非常有限：Opera，Chrome，IE10。

CODEPEN CODEPEN

Just added a class here for simplicity: 为简单起见，在这里添加了一个类：

<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: 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

Here's a solution I worked up. 这是我工作的解决方案。 It's a bit of a messy solution - it uses absolute positioning ,:nth element, pixel-based margins, and an !important tag to override inline styles. 这是一个混乱的解决方案 - 它使用绝对定位，：第n个元素，基于像素的边距和!important标记来覆盖内联样式。

However, there's no need to change the HTML markup at all . 但是， 根本不需要更改HTML标记 。 This can all be achieved through a linked stylesheet. 这可以通过链接的样式表来实现。

Here's the CSS: 这是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

I tried your code on my own, and it seems that it's working correctly. 我自己尝试了你的代码，似乎它正常工作。 Element 1 and 2 are on the upper side (tested on chrome and firefox). 元素1和2位于上侧（在chrome和firefox上测试）。

However, here are some possible solutions: 但是，这里有一些可能的解决方案：

The easiest way would be to change the order of the elements: 最简单的方法是更改元素的顺序：

<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>

But I guess that's not what you are looking for. 但我猜这不是你想要的。

Another solution would be to put the divs inside another parent-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>

If you aren't able to change the HTML-Code, there might be some special CSS3-selectors wich might fit, but I cant test it, because it's already working for me. 如果您无法更改HTML代码，可能会有一些特殊的CSS3选择器，但我无法测试它，因为它已经在为我工作了。

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

问题描述

4 个解决方案

解决方案1
7 已采纳 2013-07-26 15:08:56

解决方案2
3 2013-07-26 14:36:36

解决方案3
1 2013-07-26 14:57:36

解决方案4
0 2013-07-26 14:28:36

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

问题描述

4 个解决方案

解决方案1 7 已采纳 2013-07-26 15:08:56

解决方案2 3 2013-07-26 14:36:36

解决方案3 1 2013-07-26 14:57:36

解决方案4 0 2013-07-26 14:28:36

解决方案1
7 已采纳 2013-07-26 15:08:56

解决方案2
3 2013-07-26 14:36:36

解决方案3
1 2013-07-26 14:57:36

解决方案4
0 2013-07-26 14:28:36