gpt4 book ai didi

html - 使用 css 响应式重新定位 div

转载 作者:可可西里 更新时间:2023-11-01 13:20:30 25 4
gpt4 key购买 nike

<分区>

我正在尝试这样设置我的页面布局:

桌面 View :

|---------------|--------|
| block 1 | block2 |
| | |
| |--------|
| | block3 |
| | |

移动 View :

|---------------|
| block 2 |
|---------------|
| block 1 |
| |
| |
|---------------|
| block 3 |
|---------------|

目前我可以使用 flex-wrap flex-direction 和 block 的宽度来定位 block 1 和 2。

.container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
}

.block1 {
width: 66%;
}

.block2 {
width: 33%;
}

@media (max-width: 580px) {
.block1, .block2 { width: 100%; }
.container { flex-direction: column-reverse; }
}
<div class="container">
<div class="block1">Block 1</div>
<div class="block2">Block 2</div>
</div>

如何定位第3 block ?

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