没有引导程序的 div 并排 css - Html

有时候我们需要让一些 div 元素在同一行并排显示，实现这一效果最常见的方式是使用像 Bootstrap 这样的 CSS 框架。但是在某些情况下，我们可能不想使用这样的框架，只想使用纯 CSS 和 HTML 来实现这一效果。在本文中，我们将介绍使用纯 CSS 和 HTML 将 div 元素并排显示的方法。

首先，我们创建两个 div 元素：

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

接下来，我们使用 CSS 中的 float 属性来实现将这两个 div 元素并排显示。将 .box1 的 float 属性设置为 left，将 .box2 的 float 属性设置为 right，就可以实现这一效果。

.box1 {
  float: left;
}

.box2 {
  float: right;
}

最后，我们需要清除 float，否则后面的元素可能会受到影响。可以使用 CSS 的 clear 属性来清除 float。

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

在 HTML 中，我们使用一个空的 div 元素，为它添加 clearfix 类，然后在 CSS 中为这个类设置 clear 属性即可。

<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="clearfix"></div>

最后，这就是最终的 HTML 和 CSS 代码片段，可以将其用于实现将两个 div 元素并排显示的效果。

``` html
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="clearfix"></div>

.box1 {
  float: left;
}

.box2 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}