CSS 媒体查询：到第二行取决于屏幕宽度

Question

我有一个 div 包含以下元素

<div>
    <a class="postLink" href="{{post.authorLink}}"  target="_blank">{{post.author}}</a>
    <span class="">Published: {{ post.published}}</span>
    <a class="postLink" href="{{post.link}}"  target="_blank">View More</a>
</div>

通常呈现为：

{{post.author}}   Published: {{ post.published}}   View More

当屏幕小于 760px 时，如何将所有链接移动到第二行？

Published: {{ post.published}}   
{{post.author}}   View More

Answer 1

您可以在容器上使用相对位置，然后在媒体查询中使用绝对位置作为跨度。但我觉得这样更有趣：

.postInfo a {
    margin-right: 20px;
}
.postPublished::after {
    content: attr(data-published);
    display: inline-block;
    margin-right: 20px;
}

@media (max-width: 780px) {
    .postPublished::after {
        display: none;
    }
    .postPublished::before {
        content: attr(data-published);
        display: block;
    }
}

<div class="postInfo">
    <span class="postPublished" data-published="Published: {{ post.published}}">
        <a  class="postLink" href="{{post.authorLink}}"  target="_blank">{{post.author}}</a>
    </span>
    <a class="postLink" href="{{post.link}}" target="_blank">View More</a>
</div>

检查一下on Fiddle。

CSS 媒体查询：到第二行取决于屏幕宽度

CSS Media query: to second row depending on screen width

css

media-queries