css - 调整窗口大小时重新定位 html 元素
问题描述
我连续有 3 个元素。当窗口调整为更窄时,我希望中心元素移动到顶部,右侧元素移动到底部。左边的元素应该在中间。理想情况下,它们应该同时移动,所以如果最右边的元素向下移动,中心元素也应该向上移动。
谢谢你的帮助!
图片显示了预期的结果。
HTML
<div class="container">
<span class="left">This should go in between</span>
<span class="center">This should go ABOVE</span>
<span class="right">This should go BELOW</span>
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
.container {
width: 100%;
}
.container span {
min-width: 200px;
width: calc(100% /3);
width: 33.33%;
}
.left {
float: left;
background-color: red;
}
.center {
text-align: center;
float: left;
background-color: green;
}
.right {
float: right;
text-align: right;
background-color: blue;
}
@media (max-width: 600px) {
.right {
float: left;
text-align: left;
}
.center {
text-align: left;
}
}
解决方案
我能够找到几个解决方案。当屏幕宽度缩小到某个宽度以下时,@media css 规则会处理。这是一个示例: 解决方案 1
我最终采用的解决方案是使用 flexbox 和“order”属性来设置元素的顺序。然后@media 规则会在屏幕足够薄时更改顺序 #。
这是解决方案1(我没有写这个):
<div class="container">
<div class="inner-w">
<div class="block center">Center</div>
<div class="block left">Left</div>
<div class="block right">Right</div>
</div>
</div> <!-- .container -->
* {
box-sizing: border-box;
}
.container {
width: 100%;
float: left;
overflow: hidden; /* should be clearfix instead */
}
.container .inner-w {
position: relative;
max-width: 50em;
margin-right: auto;
margin-left: auto;
overflow: hidden; /* should be clearfix instead */
}
.block {
width: 100%;
float: left;
min-height: 10em; /* just for show */
}
@media (min-width: 50em) {
.center {
width: 50%;
position: relative;
left: 25%;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 25%;
}
.right {
float: right;
width: 25%;
}
} /* end break-point */
/* just for show */
.container {
border: 1px solid blue;
}
.container .inner-w {
border: 1px solid orange;
}
.block {
border: 1px solid red;
min-height: 10em; /* just for show */
padding: 1em;
}
推荐阅读
- javascript - 自动调整大小功能
- bash - 首次运行 bash 脚本时需要一元运算符 - 我该如何解决这个问题?
- python - google-cloud-python 是否可以查询实体的列表属性?
- django - 显示视频 Django 应用程序
- git - Git config --global user.email = "email@example.com" 和 GitHub 操作中的 user.name 错误
- azure - 我应该如何在 Azure 中部署我的微服务?
- sql - Oracle中的SQL - 如何搜索间隔中的事件?
- ios - Flutter 构建 iOS
- python - 在python3中更改方法的属性
- python - Django - 装饰器限制“员工”