考虑以下代码
<div class="container">
<div class="left">LEFT</div>
<div class="center">CENTER</div>
<div class="right">RIGHT</div>
</div>
当视口较小时,是否可以将中心div包裹到下一行?之后,我们将在上排的左侧和右div在下排的中心div?
单独使用CSS吗?还是需要JavaScript/Typescript?
代码示例会很好。谢谢。
如果使用flex
或grid
容器,则可以使用属性order
。https://developer.mozilla.org/en-us/docs/web/css/order
.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
align-content: flex-start;
width: 600px;
border: 1px solid black;
}
.left{
width: 200px;
height: 200px;
background: blue;
}
.right{
width: 200px;
height: 200px;
background: yellow;
}
.center{
width: 200px;
height: 200px;
background: red;
}
@media only screen
and (max-width : 599px){
.container{
width: 480px;
}
.center{
order: 3;
}
}
<div class="container">
<div class="left">LEFT</div>
<div class="center">CENTER</div>
<div class="right">RIGHT</div>
</div>
jsfiddle要玩:https://jsfiddle.net/jv0n8mg9/1/
实际上可以在没有flex和没有网格的情况下完成(这会导致向后兼容(。
.col {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: .5em;
}
.container .left {
float: left;
background: #fc3;
min-height: 20em;
width: 50%;
}
.container .right {
display: inline-block;
background: #3cf;
min-height: 20em;
width: 50%;
}
.container .center {
float: left;
clear: left;
width: 100%;
background: #3fc;
min-height: 20em;
min-width: 20em;
}
@media all and (min-width:60em) {
.container .left,
.container .right {
width: 25%;
}
.container .center {
clear: none;
width: 50%;
}
}
<div class="container">
<div class="left col">LEFT</div>
<div class="center col">CENTER</div>
<div class="right col">RIGHT</div>
</div>
是的,只需在容器上使用Flex,然后更改center
Div的order
即可。
请参阅下面的代码,并将其包装在@media only screen(max-width: 768px)
或您需要什么断点。
.container {
display: flex;
flex-wrap: wrap;
}
.container div {
width: 50%;
border: 1px solid red;
height: 20px;
box-sizing: border-box;
}
.center {
order: 3;
margin: 0 auto;
}
<div class="container">
<div class="left">LEFT</div>
<div class="center">CENTER</div>
<div class="right">RIGHT</div>
</div>
带有CSS网格,它看起来如下:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.container > div {
border: 1px solid red;
}
.left {
grid-column-start: 1;
}
.center {
grid-column-start: 2;
grid-row-start: 2;
}
.right {
grid-column-start: 3;
}
<div class="container">
<div class="left">LEFT</div>
<div class="center">CENTER</div>
<div class="right">RIGHT</div>
</div>