在CSS中,我们可以使用 display 属性来控制元素的布局方式。其中一个常见的使用场景就是将两个元素挨着排列。以下是两种实现方法:.demo1 { display: inline-block; w
在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。这样,子元素就可以自适应容器的宽度而不需要设置固定宽度。
粉丝
0
关注
0
收藏
0