Question

主题说明了一切，但我正在寻找一种干净简单的方法来做到这一点。基本上就是这样想的：

[A] [__乙_] [A]

到

[A] [A]

[__乙_]

希望这很清楚，但如果需要，我可以详细说明。

提前致谢！

Answer 1

你可以使用flexbox命令

＆＃13;

var Student = function (firstName, scores){
  this.firstName = firstName;
  this.scores = scores;
};

＆＃13;

.flex-container {
	padding: 0;
	margin: 0;
	display: flex;
	flex-flow: row wrap;
}

.flex-item {
	box-sizing: border-box;
	background: green;
	padding: 20px;
	width: 20%;
	height: 100px;
  border: 1px solid white;
	color: white;
	text-align: center;
}
@media screen and (max-width: 900px){
	.flex-item {
		background: green;
		width: 50%;
		height: 100px;
		color: white;
		text-align: center;
	}
	.flex-item:nth-of-type(2) {
		order: 3;
		width: 100%
	}

}

＆＃13;

在此处阅读更多内容：https://developer.mozilla.org/en/docs/Web/CSS/order

Answer 2

如果你一起开始连续使用3个元素，但你需要将元素B放在外面，你需要使用flexbox。

您将专注于选择器的order属性，并在元素B上使用flex-grow。阅读该文档以了解如何设置它，或确保这正是你所需要的。否则，您可以转到jQuery。

Answer 3

你可以把所有三个div放在一个div中来实现：

<div class="allthree">
    <div class="twoas">
        <div class="a"></div>
        <div class="a"></div>
    </div>
    <div class="oneb">
        <div class="b"></div>
    </div>
</div>

现在为此添加一些CSS，使b为100％宽度，a为50％宽度。确保a为display: inline-block;

.allthree {
    width: <your-width>
}

.allthree .twoas {
    width: 100%;
} 

.allthree .twoas .a {
    display: inline-block;
    width: 50%;
}

.allthree .oneb {
    width: 100%;
} 

.allthree .oneb .b {
    width: 100%;
}

在较小的屏幕上将两个外部div放在中心div之上

3 个答案: