gpt4 book ai didi

html - 使用 CSS 切换 block 元素的顺序

转载 作者:技术小花猫 更新时间:2023-10-29 11:27:09 26 4
gpt4 key购买 nike

<分区>

短篇小说

假设我的 HTML 已经确定:

<div id="blockA">Block A</div>
<div id="blockB">Block B</div>
<div id="blockC">Block C</div>

它看起来像这样:

------------
| Block A |
------------
| Block B |
------------
| Block C |
------------

现在我想切换 block 的顺序。我怎样才能只使用 CSS 来做到这一点?

------------
| Block C |
------------
| Block A |
------------
| Block B |
------------

我知道有诸如使用 position:absolute 之类的 hacky 解决方案,但这并不能保留 display:block 属性的有效使用。也就是说, block 在变大时会将其他 block 向下推。

说来话长

当用户使用计算机查看我的网页时, block 按以下顺序显示:

  1. 一般信息。
  2. 事件日程。
  3. iPhone 应用广告

iPhone 应用程序广告放在最后,因为它对计算机用户来说不是很重要。一小部分计算机用户会拿出手机并安装该应用。

如果移动用户访问此站点,iPhone 应用程序广告应该是页面上最重要的内容。因此,它应该移到顶部:

  1. iPhone 应用广告
  2. 一般信息。
  3. 事件日程。

我希望 iPhone 和计算机用户共享相同的 HTML,但让 CSS 媒体查询切换 block 的顺序。

@media only screen and (max-device-width: 480px) {
#blockC {
/* magic order switching */
}
}

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com