在较小的视口宽度时，将4个div对齐为每行2个

在较小的视口宽度时，可以使用CSS的媒体查询和Flexbox布局来将4个div对齐为每行2个。

1. 首先，在HTML中创建4个div元素，可以使用以下代码：

<div class="container">
  <div class="box">Div 1</div>
  <div class="box">Div 2</div>
  <div class="box">Div 3</div>
  <div class="box">Div 4</div>
</div>

1. 在CSS中，使用媒体查询来检测视口宽度是否较小，例如：

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 1 0 50%;
}

@media (max-width: 768px) {
  .box {
    flex-basis: 100%;
  }
}

在上面的代码中，.container使用display: flex和flex-wrap: wrap来创建一个Flexbox容器，并使其子元素可以换行。.box使用flex: 1 0 50%将每个div平均占据父容器的一半宽度。

1. 使用媒体查询(@media)来设置较小视口宽度时的样式。在上面的代码中，.box在视口宽度小于或等于768px时，使用flex-basis: 100%将每个div的宽度设置为100%，从而实现每行2个div的对齐。

这样，无论在何种设备上访问页面，当视口宽度较小时，4个div都会自动对齐为每行2个。