3

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

4 回答 4

7

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

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

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

整个代码就这么简单：

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

是的，这是一个非常厚颜无耻的黑客行为。就处理能力而言，它肯定效率不高。而且感觉不对。但你知道......它的工作原理。

它在小提琴中发挥作用：http: //jsfiddle.net/zW4TR/

（注意：对于某些浏览器，您可能需要在样式上添加供应商前缀transform，并注意它在 IE8 或更早版本中不起作用，因为它不支持转换。（在 IE8 中有一种旋转方式，但它很漂亮丑陋而古怪，我会担心它们在旋转中的旋转效果如何）

于 2013-07-26T15:08:56.237 回答
3

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

编解码器

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

<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%;
}
于 2013-07-26T14:36:36.497 回答
1

这是我制定的解决方案。这是一个有点混乱的解决方案——它使用绝对定位 ,:nth 元素、基于像素的边距和一个!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;
}
于 2013-07-26T14:57:36.820 回答
0

我自己尝试了你的代码，它似乎工作正常。元素 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 放在另一个父 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 选择器可能适合，但我无法测试它，因为它已经为我工作了。

于 2013-07-26T14:28:36.583 回答