两个div并排且左右排列

可以使用CSS中的float属性实现两个div并排且左右排列。具体实现可以参考以下代码：

HTML代码：

<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

CSS代码：

.container {
  width: 100%;
  overflow: hidden;
}

.left {
  width: 50%;
  float: left;
}

.right {
  width: 50%;
  float: right;
}

以上代码中，container为父元素，left和right为两个并排的div，使用float属性实现左右排列。同时，为了防止父元素高度塌陷，需要在父元素中设置overflow:hidden属性。

相关问题

css两个div并排排列如何设置间距

要让两个并排的 div 之间有间距，可以使用 margin 属性。例如，如果想要左侧的 div 右侧有 10px 的间距，可以这样设置：

<div style="float: left; width: 50%; margin-right: 10px;">左侧的 div</div>
<div style="float: left; width: 50%;">右侧的 div</div>

其中，margin-right: 10px; 表示右侧的 div 左侧有 10px 的间距。注意，这里使用了 float 属性将两个 div 并排排列。

让两个div并排显示在另一个大的div总

让两个`<div>`元素并排显示在另一个更大的`<div>`容器中，通常可以使用CSS布局技术来实现。这里有两种常见的方法：

1. **块级元素排列**:
如果你想让这两个`<div>`默认水平排列，你可以将它们设置为`display: inline-block;`，这样它们就会在同一行内并排放置。例如：

   <div class="container">
     <div class="box box1">Div 1</div>
     <div class="box box2">Div 2</div>
   </div>

   .container {
     display: flex; /* 或者 display: inline-flex */
   }
   .box {
     display: inline-block;
     width: 50%; /* 根据需要调整宽度 */
     margin-right: 10px; /* 添加边距避免间距过大 */
   }

2. **Flexbox布局**:
使用CSS Flexbox布局更现代且灵活，只需给包含`div`的父元素添加`display: flex;`属性，并调整`justify-content`属性（如`flex-start`, `space-between`, 等），可以轻松地控制子元素的对齐方式。

   .container {
     display: flex;
     justify-content: space-between;
   }

3. **Grid布局**:
CSS Grid是另一种强大的二维布局工具，如果需要更复杂的布局，可以考虑使用它。给父元素添加`display: grid;`，然后指定列数和方向即可。

对于以上每种方法，记得检查浏览器兼容性，并根据实际需求调整样式细节。