js中如何用css设置一个方法传递不同的状态后将div平均分为左右两半，两边好放两种内容，或者将div分为田字格的均等四块, 也能还原为只有1个div

在JavaScript中，直接使用CSS来控制元素布局并不能像编程语言那样动态地根据不同状态改变div的分割。不过，你可以通过CSS媒体查询（Media Queries）结合响应式设计来实现这种需求，或者配合JavaScript做一些动态样式调整。

1. **平均分为左右两半**:
使用`:nth-child`伪类可以让你的选择器作用于奇偶行的div。例如：

   .container div:nth-child(odd) {
     width: calc(50% - 1px); /* 减去边距防止相邻元素间距 */
     float: left;
   }
   .container div:nth-child(even) {
     width: calc(50% - 1px);
     float: right;
   }

当需要还原为单个div时，可以去掉浮动(`float`)属性。

2. **田字格的均等四块**:
这种情况通常需要一些额外的CSS技巧，比如Flexbox或Grid布局。例如使用Flexbox：

   .container {
     display: flex;
     justify-content: space-between;
   }
   .container div {
     flex: 1; /* 自适应宽度 */
     border: 1px solid black; /* 可选：添加边框区分 */
   }

3. **动态改变状态** (假设JS控制):
JavaScript可以帮助你在特定条件下切换这些样式，例如：

   function divideIntoColumns(isTwoColumns) {
     var container = document.querySelector('.container');
     if (isTwoColumns) {
       container.style.display = 'flex';
       // 其他两列相关样式...
     } else {
       container.style.display = 'block'; // 或者还原为默认样式
       // 清除其他可能存在的分隔样式...
     }
   }

当然，上述示例是静态的，实际应用中可能会有更复杂的交互逻辑。