html - 更改相对 div 中绝对按钮的顺序
问题描述
我有两个按钮(在状态列中)在相对 div 中的绝对位置,但是当屏幕变小时,这两个按钮会覆盖自身。
有没有办法改变他们的顺序?
实际上,我想使用 flex 和 order 来更改哪个按钮位于顶部,但我无法完成。
Tailwind cdn效果不太好,但我还是创建了笔,请参阅下面的评论。
解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
position: relative;
}
.absolute-div {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 10%;
}
.flex-div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex-div button {
width: 33%;
}
@media screen and (max-width: 992px) {
.flex-div {
flex-direction: column;
}
.flex-div button:nth-child(1) {
order: 3
}
.flex-div button:nth-child(2) {
order: 1
}
.flex-div button:nth-child(3) {
order: 2
}
}
</style>
</head>
<body>
<div class="absolute-div">
<div class="flex-div">
<button>btn1</button>
<button>btn2</button>
<button>btn3</button>
</div>
</div>
</body>
</html>
我编写了一个示例示例,在绝对定位的元素上使用 flexbox 来更改宽度低于 990px 的设备的 flex 项的顺序。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
position: relative;
}
.absolute-div {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 10%;
}
.flex-div {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.flex-div button {
width: 33%;
}
@media screen and (max-width: 992px) {
.flex-div {
flex-direction: column;
}
.flex-div button:nth-child(1) {
order: 3
}
.flex-div button:nth-child(2) {
order: 1
}
.flex-div button:nth-child(3) {
order: 2
}
}
</style>
</head>
<body>
<div class="absolute-div">
<div class="flex-div">
<button>btn1</button>
<button>btn2</button>
<button>btn3</button>
</div>
</div>
</body>
</html>
推荐阅读
- logging - 有没有办法通过缩进折叠文本但在某一列开始缩进检查?
- javascript - 如何使用 scriptElement.innerHTML = JSON.stringify 创建具有函数名称的脚本?
- pandas - Using clicks and keys for different events on Matplotlib
- r - 将 xgb.DMatrix 转换为数据框或矩阵
- scala - How to fold on list of WriterT in cats
- html - How to fix popping on hover?
- bash - How do I override the entrypoint and pass Bash commands as a string?
- c# - HttpClient.PostAsync 会覆盖现有文件吗?
- visual-studio-code - 将“超链接”添加到 VSC(Visual Studio 代码)中的单词
- python - 使用包装的单元格文本保存 matplotlib 表格图像