四个水平对齐的div在较小的屏幕上拆分为两个
，可以通过响应式设计来实现。响应式设计是一种能够根据不同设备的屏幕尺寸和分辨率自动调整布局和显示效果的设计方法。
在这种情况下，可以使用CSS媒体查询来检测屏幕尺寸，并根据需要改变布局。以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
justify-content: space-between;
}
.box {
width: 25%;
height: 200px;
background-color: #ccc;
border: 1px solid #000;
}
@media (max-width: 768px) {
.container {
flex-wrap: wrap;
}
.box {
width: 50%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>在上面的代码中，我们使用了flex布局来创建一个包含四个div的容器。每个div都有一个名为"box"的类，用于设置样式。在媒体查询中，我们使用了max-width属性来指定屏幕尺寸小于等于768px时的样式，将容器的flex-wrap属性设置为wrap，使得div在较小屏幕上可以换行显示，并将每个div的宽度设置为50%。
这样，当屏幕尺寸较小时，四个div就会自动拆分为两行显示，保证了布局的适应性和可读性。
对于腾讯云的相关产品，可以考虑使用腾讯云的云服务器（CVM）来托管网站，并使用腾讯云的云数据库（CDB）来存储数据。此外，腾讯云还提供了丰富的云计算解决方案，如云函数（SCF）、云原生容器服务（TKE）等，可以根据具体需求选择适合的产品。
更多关于腾讯云产品的信息，可以参考腾讯云官方网站：https://cloud.tencent.com/
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
