几个div在一行的三种方法

逃离我推掉我的手 2022-09-02 12:51 174阅读 0赞

## 几个div在一行的三种方法 ##

在网页开发过程中总会有需求让几个div水平显示在一行，而正常情况下两个div默认是block，所以是不能显示在一行的，如下面显示：

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
    div {
    height: 200px;
    width: 200px;
    }
    .div-green {
    background-color: green;
    }
    .div-red {
    background-color: red;
    }
    </style>
    </head>
    <body>
    <h1>normal div</h1>
    <div class="div-green">div1</div>
    <div class="div-red">div2</div>
    </body>
    </html>

上面代码执行的结果是：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70]

下面我来介绍一下把几个div水平显示在一行的几种方法。

1.  float

这是最容易想到的方法，设置div的float属性，可以使div脱离文档流，水平显示在一行，代码如下：

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
    　　body {
    　　　　margin: 100px;
    　　}
    　　div {
    　　　　height: 200px;
    　　　　width: 200px;
    　　}
    　　.div-green {
    　　　　background-color: green;
    　　}
    　　.div-red {
    　　　　background-color: red;
    　　}
    　　.float-div {
    　　　　float: left;
    　　}
    </style>
    </head>
    <body>
    　　<h1>float div</h1>
    　　<div class="div-green float-div">div1</div>
    　　<div class="div-red float-div">div2</div>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 1]

2.inline

既然div是因为其是块状元素才不能显示在一行，那么将display属性改为inline-block不就可以使其水平显示在一行了吗

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
    　　body {
    　　　　margin: 100px;
    　　}
    　　div {
    　　　　height: 200px;
    　　　　width: 200px;
    　　}
    　　.div-green {
    　　　　background-color: green;
    　　}
    　　.div-red {
    　　　　background-color: red;
    　　}
    　　.inline-div{
    　　　　display: inline-block;
    　　}
    </style>
    </head>
    <body>
    　　<h1>inline div</h1>
    　　<div class="div-green inline-div">div1</div>
    　　<div class="div-red inline-div">div2</div>
    </body>
    </html>

显示结果如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 2]

3.flex

flex和模型也是可以将两个div水平显示的，只要将div对应的父级元素的display属性设置为flex即可：

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style>
    　　body {
    　　　　margin: 100px;
    　　}
    　　div {
    　　　　height: 200px;
    　　　　width: 200px;
    　　}
    　　.div-green {
    　　　　background-color: green;
    　　}
    　　.div-red {
    　　　　background-color: red;
    　　}
    　　.flex-div{
    　　　　display: flex;
    　　　　width: auto;
    　　}
    </style>
    </head>
    <body>
    　　<h1>flex div</h1>
    　　<div class="flex-div">
    　　<div class="div-green">div1</div>
    　　<div class="div-red">div2</div>
    　　<div class="div-green">div3</div>
    </div>
    </body>
    </html>

显示结果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 3]

与上面两种方法不同的是，上面两种方法是通过改变div自己的css来实现效果，而flex需要在父级设置display:flex,这点是需要注意的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70]: /images/20220829/9a9686f697fd4a3ab27ea63f76025a6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 1]: /images/20220829/4434313cca1541e192332de4d1dace2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 2]: /images/20220829/afec9aff245f447ba1dd16124d2d5743.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70 3]: /images/20220829/4ddb7fbf369541409e4a7e2a82f2be60.png