两个div并排，如果内容沾满再分行

当需要将两个 `div` 元素并排放置，并且内容溢出时自动换行，你可以通过设置CSS布局属性来实现。这里推荐两种常见的方法：

1. **浮动布局** (Float): 使用 `float` 属性可以让元素左对齐或右对齐，同时允许其他元素填充剩余空间。例如：

   .container {
     width: 100%;
     overflow: auto; /* 添加这行是为了防止父容器高度塌陷 */
   }
   .box {
     float: left;
     width: 50%; /* 或者设置自适应宽度，如 calc(50% - 10px) 来留出间距 */
     box-sizing: border-box; /* 包含边框和内边距在元素尺寸里 */
   }

然后在HTML中创建两个`.box`元素。

2. **Flex布局** (Flexbox): 如果你希望支持更现代的浏览器，可以使用 Flexbox。给包含这两个`div`的容器添加 `display: flex` 和适当的对齐规则，如：

   .container {
     display: flex;
     flex-wrap: wrap; /* 当元素太长时开始换行 */
     justify-content: space-between; /* 或者选择其他对齐方式 */
     width: 100%;
   }
   .box {
     flex: 1; /* 自动调整大小，保证平均分配空间 */
     box-sizing: border-box;
   }

这两种方法都能确保两个`div`按需换行显示，只要内容超过各自的宽度范围。