数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 HTML 中水平对齐两个 div？
division 标签名本身表明它用于创建分区，并在网页中显示布局。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 标签包含在另一个名为 class 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 用于设置项目的长度，值是继承、auto 或任何后跟 % em、px 或长度单位的数字。
Flex-grow 指定一个数字，指示与 flex 容器中剩余的灵活项目相比应该增长多少。
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 元素 (global) 和两个在父元素内的子 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>
8K+ 次浏览
