我有三列;左,中,右,它们位于屏幕宽度为100%的div中。在媒体查询中,当屏幕尺寸减小时,我可以让中间列保持在顶部,左列在下面,然后右列在下面吗?我已经附加了CodePen,并在下面显示了HTML和CSS:https://codepen.io/Macast/pen/jZworE。任何帮助将不胜感激!我不知道该怎么做。
HTML:
<body>
<div class="columnContainer">
<div class="leftColumn" style="background-color:#aaa;">
<h2>Left Column</h2>
</div>
<div class="middleColumn" style="background-color:#bbb;">
<h2>Middle Column</h2>
</div>
<div class="rightColumn" style="background-color:#ccc;">
<h2>Right Column</h2>
</div>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.columnContainer {
width: 100%;
}
.leftColumn {
float: left;
width: 33.33%;
padding: 10px;
height: 200px;
text-align: center;
}
.middleColumn {
float: left;
width: 33.33%;
padding: 10px;
height: 200px;
text-align: center;
}
.rightColumn {
float: left;
width: 33.33%;
padding: 10px;
height: 200px;
text-align: center;
}
.columnContainer:after {
content: "";
display: table;
clear: both;
}
/* Media Query */
@media (min-width: 320px) and (max-width: 480px) {
/* Column Stacking Here */
}
答案 0 :(得分:1)
您可以使用flex
+ order
;
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.columnContainer {
width: 100%;
display: flex;
}
.leftColumn {
width: 33.33%;
padding: 10px;
height: 200px;
margin: 0 auto;
text-align: center;
}
.middleColumn {
width: 33.33%;
padding: 10px;
height: 200px;
margin: 0 auto;
text-align: center;
}
.rightColumn {
width: 33.33%;
padding: 10px;
height: 200px;
margin: 0 auto;
text-align: center;
}
/* Media Query */
@media (min-width: 320px) and (max-width: 480px) {
/* Column Stacking Here */
.columnContainer {
flex-direction: column;
}
.leftColumn {
order: 2;
}
.middleColumn {
order: 1;
}
.rightColumn {
order: 3;
}
}
<body>
<div class="columnContainer">
<div class="leftColumn" style="background-color:#aaa;">
<h2>Left Column</h2>
</div>
<div class="middleColumn" style="background-color:#bbb;">
<h2>Middle Column</h2>
</div>
<div class="rightColumn" style="background-color:#ccc;">
<h2>Right Column</h2>
</div>
</div>
</body>
</html>
答案 1 :(得分:0)
/* Media Query */
@media (max-width: 480px) {
.leftColumn, .middleColumn, .rightColumn {
float: left;
width: 100%;
padding: 10px;
height: 200px;
text-align: center;
}
}