[分享]css两个元素挨着

在CSS中，我们可以使用"display"属性来控制元素的布局方式。其中一个常见的使用场景就是将两个元素挨着排列。以下是两种实现方法：.demo1 { display: inlin...

在CSS中，我们可以使用"display"属性来控制元素的布局方式。其中一个常见的使用场景就是将两个元素挨着排列。以下是两种实现方法：

.demo1 {
  display: inline-block;
  width: 100px;
}
.demo2 {
  display: inline-block;
  width: 200px;
} 

上述代码中，两个元素（类名为demo1和demo2）都设置了"display: inline-block"属性，这样它们就可以水平排列。同时，为了保证它们不会自动换行，我们为每个元素设置了固定的宽度。

.container {
  display: flex;
}
.demo1 {
  flex: 1;
}
.demo2 {
  flex: 2;
} 

另一种比较常用的方式是使用CSS的Flexbox布局。上述代码中，我们在一个容器元素（类名为container）中使用了"display: flex"属性，并分别为两个子元素（类名为demo1和demo2）设置了不同的flex属性，其中"flex: 1"表示元素会占用可用空间的1/3，"flex: 2"表示会占用可用空间的2/3。这样，子元素就可以自适应容器的宽度而不需要设置固定宽度。