让两个div中的内容并排显示

让两个`<div>`元素的内容并排显示，通常有几种常见的布局方式：

1. **块级元素**：默认情况下，`<div>`是块级元素，占据一行。如果你想它们并排显示，可以将它们设置为浮动(`float`)、绝对定位(`position: absolute`)或使用Flexbox或Grid布局。

- **浮动**：给每个`<div>`设置`float:left`或`float:right`，它们会从文档流中脱离出来，然后按顺序堆叠在一起。

   <style>
     .container {
       overflow: auto; /* 如果包含溢出内容 */
     }
     .box {
       float: left;
       width: 50%;
       box-sizing: border-box; /* 包含边框和内填充 */
     }
   </style>
   <div class="container">
     <div class="box">div1</div>
     <div class="box">div2</div>
   </div>

2. **Flexbox布局**：通过设置容器的`display: flex`，你可以轻松控制子元素的排列。例如，在`.container`上添加`flex-wrap: wrap`，如果内容超过一列，则子元素换行。

   <style>
     .container {
       display: flex;
       flex-wrap: wrap;
     }
     .box {
       flex: 1; /* 自动分配空间 */
     }
   </style>
   <div class="container">
     <div class="box">div1</div>
     <div class="box">div2</div>
   </div>

3. **Grid布局**：使用CSS Grid可以创建更复杂的网格布局，设定行和列的数量及大小，让元素自动对齐。

   <style>
     .container {
       display: grid;
       grid-template-columns: repeat(2, 1fr); /* 列数和宽度 */
     }
     .box {
       /* 格样式 */
     }
   </style>
   <div class="container">
     <div class="box">div1</div>
     <div class="box">div2</div>
   </div>