[分享]css两个盒子横着排用什么

CSS是构建网页的不可或缺的一部分，其中最基础的技能就是排版了。今天我们来看一下如何用CSS让两个盒子横着排列。实现这个效果主要有两种方法，分别是float和display:inlineblock。首...

CSS是构建网页的不可或缺的一部分，其中最基础的技能就是排版了。今天我们来看一下如何用CSS让两个盒子横着排列。实现这个效果主要有两种方法，分别是float和display:inline-block。

首先我们看看使用float实现两个盒子横着排列的代码：

.box{
  width: 200px;
  height: 200px;
  float: left;
} 

<div class="box"></div>
<div class="box"></div> 

将这个代码放到CSS文件中，再将两个box放到HTML文件中即可实现两个盒子横着排列。

接下来我们来看看另一种使用display:inline-block实现的方法：

.box{
  width: 200px;
  height: 200px;
  display: inline-block;
} 

<div class="box"></div>
<div class="box"></div> 

同样，将这个代码放到CSS文件中，再将两个box放到HTML文件中即可实现两个盒子横着排列。

不过需要注意的是，使用display:inline-block实现的时候，盒子之间会留出一些空隙。这个空隙可以通过给父盒子设置font-size:0的方式来解决。

综上，使用float和display:inline-block这两种方法都可以实现两个盒子横着排列。具体使用哪一种方法，可根据实际需求来选择。