Sybex的博客

使用CSS并排显示两个div的5种方法

发表于 分类于 ，
本文字数： 3.8k 阅读时长 ≈ 3 分钟
本文主要讨论如何使用 CSS 并排显示两个 div 的五种不同的方法，以及他们的优缺点，以便根据情况选择最适合你需求的方法。

概述

本文主要讨论如何使用CSS并排显示两个div的五种不同的方法，以及他们的优缺点，以便根据情况选择最适合你需求的方法。常见的css并排显示两个div的五种方法分别是：inline-block、flexbox、grid、float和table。

HTML标签类型

在 HTML 中标签元素大体分为三种不同的类型：块元素、内联元素（行内元素）和内联块元素。

块元素（块级元素）

块元素顾名思义该元素呈现”块”状，所以它有自己的宽度和高度，也就是可自定义 width 和 height。

块元素的特点
  • 每个块级元素都是独占据一行
  • 高度，宽度，外边距（margin）以及内边距（padding）都可以控制
  • 元素的宽度如果不设置的话默认为父元素的宽度
  • 多个块状元素标签写在一起，默认排列方式为从上至下
  • 一般可以作为其他容器使用，可容纳块级元素和行内元素。
常用的块元素
1
<div>,<p>,<h1>-<h6>,<ol>,<ul>,<dl>,<dt>,<table>,<tbody>,<td>,<th>,<tr>,<address>,<blockquote>,<form>

内联元素（行内元素）

内联元素（行内元素）不占有独立的区域，不可以设置width和height但可以与其他内联元素位于同一行，内联元素内一般不可以包含块元素。它的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。

内联元素的特点
  • 不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化
  • 设置宽width高height无效，对外边距（margin）和内边距（padding）仅设置左右方向有效设置上下无效
  • 可以设置行高line-height但不建议这么做，虽然行内元素设置行高之后会有位置的变化，但是并没有改变盒子大小。 行高是整行的高度，并不是盒子的高度 。
  • 元素的宽度就是它包含的文字或图片的宽度不可改变
  • 行内元素中不能放块级元素
常用的内联元素
1
<a>,<span>,<br>,<i>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>

内联块元素

内联块元素，也叫行内块元素是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素。我们可以用display属性将块元素或者内联元素转化成这种元素

内联块元素的特点
  • 支持全部样式
  • 如果没有设置宽高，宽高由内容决定
  • 盒子并在一行
  • 代码换行，盒子会产生间距
  • 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。
常用的内联块元素
1
<img>,<input>

这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。

dispaly属性

display属性是用来设置元素的类型及隐藏的。常用的属性有

  • none: 元素隐藏且不占位置
  • block: 元素以块元素显示
  • inline: 元素以内联元素显示
  • inline-block: 元素以内联块元素显示

内联元素可以将元素彼此相邻放置，但默认情况下它们不支持 width 和 height 属性，块元素默认支持 width 和 height 属性，但我们不能并排放置块元素，例如两个 div。这里有五种方法可以实现将两个div并排放置。

实现并排的五种方法

使用inline-block(内联块)

display：inline-block 属性有助于将块元素彼此并排放置,但是我们需要为 block 元素添加额外的width 属性，因为 block 元素默认采用 100% 的宽度

代码示例

1
2
3
4
<body>
   <div class="element"></div>
   <div class="element"></div>
 </body>
1
2
3
4
5
6
7
8
<style>
      .element {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: #ce8888;
      }
    </style>

效果展示

内联块属性结果

使用flex布局

flexbox是设计网页布局的一种现代方式，display：flex 赋予容器的 flex 属性，它使子元素在 flex 上下文中，并将 div 彼此相邻对齐。

代码示例

1
2
3
4
5
6
<body>
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
<style>
  .container {
    display: flex;
  }

  .item {
    background: #ef342c;
    flex-basis: 100px;
    height: 100px;
    margin: 5px;
  }
</style>

效果展示
flex布局结果

使用css网格

CSS 网格是设计网页的另一种好方法，display: grid 网格打开网格布局结构。在CSS文件中，grid-template-columns属性有助于将页面划分为列数，我们给了100px两次，然后它将创建两列

代码示例

1
2
3
4
5
6
<body>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>
1
2
3
4
5
6
7
8
9
10
11
12
<style>
  .container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 100px;
    grid-column-gap: 5px;
  }

  .item {
    background: #ef342c;
  }
</style>

效果展示
css网格结果

使用table属性

display：table 属性使用HTML表格标签

代码示例

1
2
3
4
5
6
7
8
<body>
  <div class="container">
    <div class="table-row">
      <div class="table-cell"></div>
      <div class="table-cell"></div>
    </div>
  </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style>
  .container {
    display: table;
    width: 20%;
  }

  .table-row {
    display: table-row;
    height: 100px;
  }

  .table-cell {
    border: 1px solid;
    background: #ce41;
    display: table-cell;
    padding: 2px;
  }
</style>

效果展示
table属性结果

使用float属性

css的 float 属性将元素放置在其容器的左侧或右侧，允许文本和内联元素环绕它。该元素将从页面的正常流中删除，但仍是流的一部分

代码示例

1
2
3
4
<body>
  <div class="element"></div>
  <div class="element"></div>
</body>
1
2
3
4
5
6
7
8
9
<style>
  .element {
    float: left;
    width: 100px;
    height: 100px;
    background: #af3f;
    margin: 5px;
  }
</style>

效果展示

float属性结果

总结

有很多方法可以将 div 彼此相邻对齐，但问题是哪一种更好这完全取决于自己的需求。

Flexbox 和 CSS网格是网页布局的现代方式，它是一个完整的模块，并具有许多功能。如果需要布局整个页面，我建议使用Flexbox 或 CSS网格。如果您有最低要求，那么 display：inline-block 是完美的选择。