数据结构
网络
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 用于设置项目的长度，其值为 inherit、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+ 次浏览
