迹忆客 专注技术分享

这篇文章将探讨在 HTML 文档中并排显示两个 div 元素的许多方法。

使用浮动属性

使用 float CSS 属性，文本和内联元素可以环绕位于其容器左侧或右侧的元素。 该元素仍然包含在页面流中，即使它不是常规流的一部分。

语法：

float: $value;

这个值可以是 left、right、none、inline-start、inline-end 等任何值。

为了进一步理解前面的概念，请考虑以下示例。

<div class="float-parent">
  <div class="float-child">Float Child 1</div>
  <div class="float-child">Float Child 2</div>
</div>

.float-parent {
    padding: 20px;
}

.float-child {
    width: 45%;
    float: left;
    padding: 20px;
    border: 1px dotted black;
}

在前面的示例中，我们使用 float 属性浮动每个 div 以将它们并排放置。 如果有足够的空间，它们将并排显示，因为它们都向左浮动。

我们有两个 .float-child div，每个都有 45% 的宽度，所以它们适合。

在任何与 HTML 兼容的浏览器中运行上面的代码行。 它将显示以下结果。

使用 flexbox 属性

无需浮动或定位，Flexible Box Layout 模块可以更轻松地开发灵活的响应式布局结构。 Flexbox 对移动设备友好且反应灵敏，可以方便地设计小型布局。

为了进一步理解前面的概念，请考虑以下示例。

<div class="flex-parent">
  <div class="flex-child">Flex Child 1</div>
  <div class="flex-child">Flex Child 2</div>
</div>

.flex-parent {
    display: flex;
    padding: 20px;
}

.flex-child {
    flex: 1;
    padding: 20px;
    border: 1px dotted black;
}

在前面的例子中，我们设置了 display: flex; 在父 div 容器上使用 flexbox 的类 .flex-parent 元素。 这会激活 flexbox。

然后我们设置 flex: 1; 在每个 .flex-child div 元素中。 该数字用作父 flex 元素中每个子 flex 元素的宽度之间的比率。

它们将平均共享可用空间，因为它们是相同的。 我们有两个子 div 组件； 因此，每个 div 将占用 50% 的空间。

在任何与 HTML 兼容的浏览器中运行上面的代码行。 它将显示以下结果。

使用 css 网格

CSS Grid 布局擅长将页面划分为主要区域并指定基于 HTML 基元的控件的组件之间的连接。

网格的一个重要变化是您首先选择网格模板的外观。 参考您在布局中所需的列数和/或行数。

为了进一步理解前面的概念，请考虑以下示例。

<div class="grid-parent">
    <div class="grid-child">
        Grid Child 1
    </div>
    <div class="grid-child">
        Grid Child 2
    </div>
</div>

.grid-parent {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-child {
    flex: 1;
    padding: 20px;
    border: 1px dotted black;
}

在本例中，我们需要两列宽度相等。 所以，我们使用 display: grid; 通过类 .grid-container 元素在父 div 元素中启用网格的属性。

然后使用 grid-template-columns 参数添加我们在布局中所需的列数。

我们将它设置为 1fr 1fr 因为我们想要两列的宽度相同。 这指示浏览器生成两列布局，每列之间的间距为 1 fr = 小数单位。

我们在 flexbox 方法中使用的 flex: 1 规则类似于 fr 单位，它是一列与另一列的比率。 如果列设置为 1fr 1fr，则每列将使用相同的空间量。

在任何与 HTML 兼容的浏览器中运行上面的代码行。 它将显示以下结果。