如何在 HTML 中水平对齐两个 div?
div 标签的名称本身就表明它会进行划分，并在网页中显示布局。DIV 标签可以应用于文本、图像、导航栏等，在这些位置可以创建单独的部分。
此标签由开始标签 <DIV> </DIV> 和结束标签组成，如果我们想要划分页面，则需要同时使用这两个标签。
内容可以是任何类型的数据或图像。DIV 标签可以使用 CSS 设置样式，也可以使用 JavaScript 进行操作，使用 class 或 id 属性可以轻松设置样式。
DIV 标签被称为块级元素，这意味着它会根据左右两侧的可用宽度从新行开始。
它由底部边距和顶部边距组成。<div> 标签主要用作 HTML 元素的容器。div 标签的 Class 和 id 属性与之配合使用。
语法
以下是 DIV 标签的语法/用法 −
<div> Content </div>
示例
以下示例演示如何水平对齐两个 DIV 标签 −
<!DOCTYPE html>
<html>
<head>
<title>HTML div Example</title>
</head>
<body>
<div style="width:150px;float:left;height:100px; background:lightgreen; margin:10px">
First BLOCK
</div>
<div style="width: 150px; float:left; height:100px; background:lightblue; margin:10px">
Second BLOCK
</div>
</body>
</html>
当我们运行上述代码时，两个具有内联样式的 DIV 元素将并排显示，其中的矩形框内指定了特定的颜色和文本。
在 HTML 中水平对齐两个 DIV
使用 CSS，我们可以通过多种方式水平对齐两个 DIV 标签，例如 −
通过为两个 DIV 使用全局类
通过使用 Flex 属性
为 DIV 设置单独的样式
让我们通过一个示例 −
详细了解每种对齐方式。为两个 DIV 使用全局类
通过使用 class 属性将两个 DIV 标签放置在一个父 DIV 中。class 属性的值用于在 CSS 中设置 DIV 的样式。我们将使用 float 属性 来定位网页上的元素。
语法
以下是 float 属性 − 的语法/用法
Float: left | right | initial | inherit | none;
上述 float 属性值指示容器的位置。
Inherit 用于从其父元素继承元素，left 用于排列到其右侧容器，right 用于将元素放置到其左侧容器，initial 属性设置为其默认值。
示例
以下示例演示了如何为两个 div 标签使用全局类 −
在下面的程序中，两个 DIV 标签被封装在另一个名为 global 类的 div 标签中。它在 <style> 标签内调用。CSS 中的 float 属性用于指定元素的位置。
<!DOCTYPE html>
<html>
<head>
<style>
.global div {
float: left;
clear: none;
}
</style>
</head>
<body>
<div class="global">
<div>
<p>i.</p>
<p>ii.</p>
<p>iii.</p>
</div>
<div>
<p><b>HTML5</b></p>
<p><b>Cascading Style Sheet</b></p>
<p><b>JavaScript</b></p>
</div>
</div>
</body>
</html>
运行上述代码时，会在父 div 类"global"内创建两个 div 元素。子 div 元素将向左浮动，文本也将相应地进行格式化。
为 DIV 应用 Flex 属性
此属性是 CSS 中 grow、shrink 和 basis 的组合。通常用于管理可伸缩元素的长度。它对移动设备友好，并且易于排列主容器和子元素。
Flex 属性响应速度极快。无需编辑 HTML 部分，即可轻松更改元素的顺序。因此，使用 CSS flex，我们可以将两个 DIV 元素对齐。
语法
遵循 flex 属性 − 的语法或用法
flex: flex-basis flex-grow flex-shrink | initial | auto| inherit;
上述 flex 属性 用于设置元素的弹性长度，− 的属性值
Flex-basis 用于设置元素的长度，其值为继承、自动或任意数字，后跟 % em、px 或长度单位。
Flex-grow 指定一个数字，表示相对于弹性容器中剩余的弹性元素，应增加的长度。
Flex-shrink 表示一个数字，用于指定将根据剩余的灵活项目收缩的项目数量。
示例
以下示例演示了 flex 属性 如何设置灵活项目的长度 −
<!DOCTYPE html>
<html>
<head>
<style>
.global {
display: flex;
}
</style>
</head>
<body>
<div class="global">
<div>
<p>i.</p>
<p>ii.</p>
<p>iii.</p>
</div>
<div>
<p><b>HTML5</b></p>
<p><b>Cascading Style Sheet</b></p>
<p><b>JavaScript</b></p>
</div>
</div>
</body>
</html>
运行上述代码时，将显示一个父 div 元素(全局)及其内部的两个子 div 元素。子元素中指定的文本将相应地进行格式化。
为 div 标签使用单独的样式
通过使用 style 属性，可以分别设置两个 div 标签的样式。
语法
以下是为各个 div 元素设置样式的语法 −
<div style="float: left| right| inherit ; width: %">
示例
以下示例演示了如何为各个 DIV 设置样式 −
<!DOCTYPE html>
<html>
<body>
<div style="float: right; width: 70%">
<p>i.</p>
<p>ii.</p>
<p>iii.</p>
</div>
<div style="float: left; width: 30%">
<p><b>HTML5</b></p>
<p><b>Cascading Style Sheet</b></p>
<p><b>JavaScript</b></p>
</div>
</body>
</html>
执行上述代码时，div 标签将水平显示 - 第一个排列的 div 标签向右浮动 70%，第二个 div 标签向左浮动 30%。
示例
考虑另一个示例，通过更改单个 DIV 标签的样式 −
<!DOCTYPE html>
<html>
<body>
<div style="float: left; width: 50%">
<p>TutorialsPoint</p>
<p>HTML</p>
<p>Java</p>
<p>Oracle</p>
</div>
<div style="float: right; width: 50%">
<p><b>Website</b></p>
<p><b>Tutorials</b></p>
<p><b>Tutorials</b></p>
<p><b>Tutorials</b></p>
</div>
</body>
</html>
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
