css的两个盒子同一行布置对齐的方式有哪些

有以下几种方式可以让两个盒子在同一行上并实现对齐：

1. 使用float属性

可以使用float属性让两个盒子浮动到同一行，然后使用vertical-align属性实现对齐。具体代码如下：

.box1 {
  float: left;
  width: 200px;
}

.box2 {
  float: left;
  width: 100px;
  vertical-align: middle; /* 垂直居中对齐 */
}

2. 使用inline-block属性

将两个盒子设置为inline-block属性，可以让它们在同一行并且可以使用vertical-align属性实现对齐。具体代码如下：

.box1, .box2 {
  display: inline-block;
  vertical-align: middle; /* 垂直居中对齐 */
}

.box1 {
  width: 200px;
}

.box2 {
  width: 100px;
}

3. 使用Flexbox布局

使用Flexbox布局可以更方便地实现两个盒子在同一行上并且对齐。具体代码如下：

.container {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
}

.box1 {
  width: 200px;
}

.box2 {
  width: 100px;
}

注意：为了让Flexbox布局生效，需要给父容器设置宽度和高度。