这些是3 inline-block和元素,这意味着它们将彼此相邻排序.
这是一个观看现场活动的小提琴:https://jsfiddle.net/8mdm8eox/
.wrapper {
background: #fff;
width: 100%
}
.firstElement,
.secondElement,
.thirdElement {
display: inline-block;
width: calc(100%/3)
}
.firstElement {
background: #000;
color: #fff
}
.secondElement {
background: grey
}
.thirdElement {
background: #ddd
}
@media (max-width: 767px) {}<div class="wrapper">
<div class="firstElement">First Element</div>
<div class="secondElement">Second Element</div>
<div class="thirdElement">Third Element</div>
</div>所以这就是我想要的,我想在屏幕宽度为767px或更低时:
@media (max-width: 767px){}
前两个元素是垂直排序的,第三个元素是与另外两个元素水平排序的,所以它们变成了:
_______________ ________________
|First Element| |? |
_______________ | |
|Third Element |
________________ | |
|Second Element| | | …