css两个盒子并列

要让两个盒子并列，可以使用 CSS 中的 float 属性。首先需要将两个盒子的宽度设置为一定比例，例如50%。然后将它们的 float 属性设置为 left 或 right，这样它们就可以并排显示了。

以下是一个示例代码：

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

<style>
.container {
  width: 100%;
  overflow: hidden;
}

.box1, .box2 {
  width: 50%;
  float: left; /* 或者是 right */
}
</style>

在上面的代码中，container div 是一个包含两个盒子的容器。box1 和 box2 div 分别设置为 50% 的宽度，然后使用 float 属性将它们并排显示在容器中。container div 的 overflow 属性设置为 hidden，以防止其中的盒子溢出容器。

相关问题

css两个盒子并列中间有条线

你可以使用CSS的flex布局来实现两个盒子并列，并在它们中间添加一条线。具体步骤如下：

1. 用一个父容器包含两个子盒子，设置display为flex，这样两个子盒子就并列在一起了。

2. 给父容器设置justify-content为space-between，这样两个子盒子就会分别靠左和靠右，并且它们之间会有一些空隙。

3. 在父容器中添加一个伪元素，比如:before或:after。给伪元素设置content为一个空字符串，然后设置宽度、高度、背景颜色和位置，这样就可以在两个子盒子之间添加一条线了。

具体的CSS代码如下：

.parent {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.parent::before {
  content: "";
  width: 1px;
  height: 20px;
  background-color: #000;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

这样就可以在两个并列的盒子之间添加一条线了。

css两个盒子并排

要将两个盒子并排，可以使用以下方法：

1. 使用 float 属性

将两个盒子都设置为 float: left;，并设置宽度和间距即可。示例代码：

<div style="float: left; width: 50%; margin-right: 10px;">盒子1</div>
<div style="float: left; width: 50%;">盒子2</div>

2. 使用 display 属性

将两个盒子都设置为 display: inline-block;，并设置宽度和间距即可。示例代码：

<div style="display: inline-block; width: 50%; margin-right: 10px;">盒子1</div>
<div style="display: inline-block; width: 50%;">盒子2</div>

注意：使用 inline-block 时，需要注意空格和换行符会造成间距，可以使用 font-size: 0; 和 letter-spacing: -1em; 来解决。