[分享]css两个不同盒子怎么并排排列

在网页设计中，使用 CSS 带来了很多方便和灵活性。但有时候我们会遇到这样的问题：想将两个不同的盒子并排排列。那么应该如何实现呢？预备知识：在 CSS 中，盒子有两个重要的属性：display 和 f...

在网页设计中，使用 CSS 带来了很多方便和灵活性。但有时候我们会遇到这样的问题：想将两个不同的盒子并排排列。那么应该如何实现呢？

预备知识：在 CSS 中，盒子有两个重要的属性：display 和 float。

首先，为了能够达到并排排列的效果，我们需要将两个盒子的 display 属性设置为

inline-block

。这样，它们会变成行内块元素，从而能够并排排列。

接着，我们可以给这两个盒子分别设置一个宽度，比如 width: 50%。这样它们将占据页面的一半宽度。

.box1 {
  display: inline-block;
  width: 50%;
}
.box2 {
  display: inline-block;
  width: 50%;
} 

但是你会发现，尽管按照上述方法设置了盒子之间，它们之间还是会存在间隔。这是因为行内块元素默认有间隔，因此我们需要通过设置 font-size: 0; 和 letter-spacing: -1em; 来解决。

.container {
  font-size: 0;
  letter-spacing: -1em;
}

.box1, .box2 {
  display: inline-block;
  width: 50%;
  font-size: medium;
  letter-spacing: normal;
} 

如果你想让这两个盒子放进一个容器中，并且让它们在容器中居中排列，那么可以这样做：

.container {
  text-align: center;
}

.box1, .box2 {
  display: inline-block;
  width: 50%;
  text-align: left;
} 

以上就是实现两个不同盒子并排排列的方法了。