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

问题描述：

<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

'@media（max-width：760px）{div> * {display：block}}'会将任何直接/即时'div'子移动到下一行，但也许您更喜欢别的东西？ – skobaljic

@skobaljic：这需要显示风格，但操作者希望重新排列内容？ – sjsam

Aff，真..那现在是一个有趣的问题。 – skobaljic

答

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

.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媒体查询：到第二行取决于屏幕宽度

相关推荐