教你快速掌握两个div在同一行显示css如何实现

我们都知道div是一个块元素,块元素的特点是,独占一行,从上往下排列,但是有时候我们在页面排版的时候需要从左往右横着排列,想要实现这样的效果方法有很多,首先先来看一下,默认情况下的2个div的效果如下

image-20230313172741460.png

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1{
      width: 200px;
      height: 200px;
      background-color: blue;
    }
    .box2{
      width: 200px;
      height: 200px;
      background-color: deeppink;
    }
  </style>
</head>
<body>
  <div class="box1">盒子1</div>
  <div class="box2">盒子2</div>
</body>
</html>

想要实现从左往右横着排列的效果,如下图

image-20230313173005060.png添加了浮动之后,2个盒子会横着从左往右排列.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1{
      width: 200px;
      height: 200px;
      background-color: blue;
      float: left;/*添加浮动*/
    }
    .box2{
      width: 200px;
      height: 200px;
      background-color: deeppink;
      float: left;/*添加浮动*/
    }
  </style>
</head>
<body>
  <div class="box1">盒子1</div>
  <div class="box2">盒子2</div>
</body>
</html>

 

image-20230313175933762.png

方法2:转换为行内块元素,转换为行内块元素之后,因为行内块识别编辑器敲的回车,所以2个盒子水平之间有缝隙,不建议使用这个方法.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .box1{
      width: 200px;
      height: 200px;
      background-color: blue;
      display: inline-block;/*转换为行内块元素*/
    }
    .box2{
      width: 200px;
      height: 200px;
      background-color: deeppink;
      display: inline-block;/*转换为行内块元素*/
    }
  </style>
</head>
<body>
  <div class="box1">盒子1</div>
  <div class="box2">盒子2</div>
</body>
</html>

 

image-20230313180023259.png

方法3:设置为弹性布局

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      display: flex;/*设置为弹性布局,弹性布局中主轴默认是水平的,这个时候内部的子元素会横着排列*/
    }
    .box1{
      width: 200px;
      height: 200px;
      background-color: blue;
    }
    .box2{
      width: 200px;
      height: 200px;
      background-color: deeppink;
    }
  </style>
</head>
<body>
  <div class="box1">盒子1</div>
  <div class="box2">盒子2</div>
</body>
</html>

　　

posted @ 2023-07-14 10:53  可爱的小锋  阅读(665)  评论(0)    收藏  举报