我有两个布局切换与媒体查询,我看到,图片占据右上角四分之一的我的主页会更好地在最后的网页,当在移动的上较小的布局。但我的html(markdown,但这并不重要)的figure元素位于第一位。所以我希望是绝对定位,除了它留在流中,没有叠加。好像我已经重新排序了元素。Javascript是禁止的,有没有一个简单的方法与css?谢谢。我现在唯一能想到的是复制元素和应用显示:一个或另一个都没有。
gkn4icbw1#
为了跟进tacosy的建议,下面是一个如何使用Flexbox或Grid的示例。以HTML为例
<div class="container"> <figure> <!-- Your image here --> </figure> <div class="content"> <!-- Your other content here --> </div> </div>
关于Flexbox
.container { display: flex; flex-direction: column; } @media (max-width: 767px) { figure { order: 1; } .content { order: 0; } }
或者使用Grid
.container { display: grid; grid-template-areas: "figure" "content"; } figure { grid-area: figure; } .content { grid-area: content; } @media (max-width: 767px) { .container { grid-template-areas: "content" "figure"; } }
1条答案
按热度按时间gkn4icbw1#
为了跟进tacosy的建议,下面是一个如何使用Flexbox或Grid的示例。
以HTML为例
关于Flexbox
或者使用Grid