html - 平铺 div 顶部/底部右/左，水平最大 div 数量？

Question

我有四个 div 按顺序排列。如果内容适合，我希望每个人占据页面的一 Angular ，否则按顺序垂直排列。

#pptopleft,
#pptopright,
#ppbottomleft,
#ppbottomright {
	text-align: center;
	border: 1px solid black;
	width: 50%;
}
#ppcontainer {
    border: 1px solid black;
    font-size: 120%;
    min-height: 250px;
    margin-top: 20px;
    margin-left: 50px;
    margin-right: 50px;
    padding-left: 3px;
    padding-right: 3px;
    padding-top: 3px;
    padding-bottom: 3px;
    overflow: auto;
}

<div id="ppcontainer">
    <div id="pptopleft">#1</div>
    <div id="pptopright">#2</div>
    <div id="ppbottomleft">#3</div>
    <div id="ppbottomright">#4</div>
</div>

如果它们可以容纳，我希望它们各占父容器宽度的 50%，但如果它们需要垂直堆叠，则每个应占 100% 宽度。类似下面的内容:

//contents of each div will fit without wrapping
1 2
3 4

//contents of each div will not fit without wrapping
1
2
3
4

后者可能适用于较小的分辨率或移动设备。

如何使用 CSS 实现此目的？

Answer 1

媒体查询可以帮助解决这个问题。例如，在您当前的 CSS 之后添加以下内容:

@media all and (max-width: 500px) {
    #pptopleft,
    #pptopright,
    #ppbottomleft,
    #ppbottomright {
        width: 100%;
    }
}

更改 500px 以匹配您想要的任何断点，并将现有的 div 设置为 float: left。