css - 使流体大小的 block 粘在顶 Angular 并允许内容在其周围流动，但在某些断点处保持在内容下方。

Question

我创建了一个 codepen 来演示效果和我想要实现的目标。这不是一个复杂的问题，但我不确定如何更简洁和直接。

http://codepen.io/anon/pen/KwoeqR

我想要的是有一个可变宽度的文本 block ，当正常流动时，它位于内容 block 的下方。但是，通过断点和媒体查询，卡在内容的右上角，并允许内容围绕它流动。

要达到等式的二分之一或另一半非常容易。我可以用这个实现 float 的右上对齐 block :

CSS:

.floater {
  float: right;
}

HTML:

<div class="floater"></div>
<p>A bunch of content text.</p>

但是，当通过媒体查询， float 内容不再 float 时，它位于内容之上。它需要位于下方。

为了让它位于下方，我可以这样做:

HTML:

<p>A bunch of content text.</p>
<div class="floater"></div>

但现在它不会正确 float - 它不会粘在右上角。

我尝试过的解决方案:

• 绝对定位:如果 block 是固定宽度，这可能会起作用。相反，它是一个可变宽度，所以我不能简单地在内容上设置边距。

• flexbox : flex 列保留其下方的空间，而不是允许其他列/内容流入其中。如果有办法让 flex 列流动或 float ，那会行得通，但我还没有找到。

我希望这是有道理的。这听起来非常特别和精确，但实际上并非如此。这是一个简单的布局问题，似乎没有简单的答案，除非我错过了它!

Answer 1

您可以结合使用 float、flex 和媒体查询，如下所示:

.floater{
    float: right;
}

@media (max-width: 500px) {
    .wrapper{
        display: flex;
        flex-direction: column;
    }
    .main{
        order: 0;
    }
    .floater{
        order: 1;
    }  
}

http://jsfiddle.net/og8s0rvr/

在这里您可以看到 floater 一直 float 直到窗口小于 500px。此时它切换到 flex 布局，其中元素的顺序通过 order 更改。