在HTML中如何让两个块状元素并排显示

我们知道，在css布局模型中，分为三个类型：1、流动模型（Flow）2、浮动模型 (Float)3、层模型（Layer）其中流动模型是网页中默认的布局模型，那如果我们想让两个块状元素并排显示，就需要用到浮动模型了。假设我们现在有两个“盒子”，在网页中默认的形式应该是这样的：但现在我们需要让这两个盒子并排显示，比如这样：我们就可以使用下面的代码，让两个块状元素靠左并排<!DOCTYPE htm

文章共616字 · 阅读需要大约3分钟

一键AI生成摘要，助你高效阅读

问答

Wellfancy

26646人浏览 · 2021-07-23 21:54:58

Wellfancy · 2021-07-23 21:54:58 发布

我们知道，在css布局模型中，分为三个类型：

1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）

其中流动模型是网页中默认的布局模型，那如果我们想让两个块状元素并排显示，就需要用到浮动模型了。

假设我们现在有两个“盒子”，在网页中默认的形式应该是这样的：

但现在我们需要让这两个盒子并排显示，比如这样：

我们就可以使用下面的代码，让两个块状元素靠左并排

<!DOCTYPE html>
<html>
	
<head>
    <meta charset="UTF-8">
    <title>让元素并排显示--浮动模型</title>
    <style type="text/css">
    div {
        border: 2px red solid;
        width: 200px;
        height: 100px;
        text-align:center;/* 让块状元素中的内容居中显示 */
    }
    #div1,#div2{
        float:left;
    }
    </style>
</head>

<body>
    <div id="div1">第一个块状元素</div>
    <div id="div2">第二个块状元素</div>
</body>

</html>

同理，如果把

    #div1,#div2{
        float:left;
    }

改为

    #div1,#div2{
        float:right;
    }

那么两个块状元素就会靠右并排显示

如果我们想让两个元素一个靠左一个靠右显示，就可以使用下面的代码

<!DOCTYPE html>
<html>
	
<head>
    <meta charset="UTF-8">
    <title>让元素并排显示--浮动模型</title>
    <style type="text/css">
    div {
        border: 2px red solid;
        width: 200px;
        height: 100px;
        text-align:center;/* 让块状元素中的内容居中显示 */
    }
    #div1{
        float:left;
    }
    #div2{
        float:right;
    }
    </style>
</head>

<body>
    <div id="div1">第一个块状元素</div>
    <div id="div2">第二个块状元素</div>
</body>

</html>

效果如下

GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

【目标检测】目标检测的一些常用神经网络模型及方法

我的阶段性总结????文章目录1.概述1.2 目标检测的任务1.3 目标检测的分类2.R-CNN系列2.1 [R-CNN（Region with CNN features）](https://arxiv.org/pdf/1311.2524.pdf)2.2 [Fast R-CNN](https://www.cv-foundation.org/openaccess/content_iccv_2015/