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

Question

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

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

等式的二分之一或另一半很容易实现。我可以用这个实现浮动的右上对齐块：

CSS:

.floater {
  float: right;
}

HTML:

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

但是，当通过媒体查询时，浮动内容不再浮动，而是位于内容之上。它需要坐在下面。

为了让它坐在下面，我可以这样做：

HTML:

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

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

我尝试过的解决方案：

绝对定位：如果块是固定宽度，这可能会起作用。相反，它是一个可变宽度，所以我不能简单地在内容上设置边距。
弹性框：弹性列保留其下方的 space，而不是允许其他 columns/content 流入其中。如果有办法让 flex 列流动或浮动，那就行了，但我还没有找到。

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

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 一直浮动，直到 window 小于 500px。那时它切换到 flex 布局，其中元素的顺序通过 order.

更改

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

Make fluid-sized block stick to top corner and allow content flow around it, but remain below content at certain breakpoints.

css

css-float

media-queries

flexbox