数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学如何在HTML中将两个div并排放置？
DIV标签就是一个分区标签，顾名思义，它用于划分网页上的内容。它有助于分离数据，例如文本、图像、导航栏等，我们也可以使用DIV标签创建特定的区域。
DIV标签包含开始和结束标签<DIV> </DIV>，如果要划分页面，这两个标签都是必须的。
DIV标签可以使用CSS进行样式设置或使用JavaScript进行操作，它可以使用class或id属性轻松设置样式。任何类型的数据都可以放在<div>标签内。
示例
以下是<DIV>标签的示例：
<html>
<head>
<title>Tutorialspoint</title>
<style type=text/css>
p {
background-color:Red;
font-size: 35px;
margin: 8px;
}
div {
color: white;
background-color: Blue;
margin: 4px;
font-size: 25px;
}
</style>
</head>
<body>
<p>How to Represent Div Tags in HTML5</p>
<div>Welcome To TutorialsPoint</div>
<div>HTML Tutorial</div>
<div>CSS Tutorial</div>
</body>
</html>
运行以上程序后，将显示一个带有标题的网页，标题文本分别为白色“欢迎来到Tutorialspoint”、“HTML教程”和“CSS教程”。
在HTML中将两个div标签并排放置
我们已经知道div标签用于创建网页布局。因此，我们可以根据需要使用DIV标签将网页内容的布局排列成并排或上下排列。
语法
要将内容并排排列，语法如下：
<style type=text/css>
.leftdivision
{
float: left;
}
.middledivision
{
float: left;
background-color:gray
}
.rightdivision
{
float: left;
}
div {
padding : 2%;
color: black;
background-color: pink;
width: 30%;
border: white;
}
</style>
在上例语法中，float: left表示布局必须从网页的左侧开始。
现在让我们看一些例子来了解更多关于DIV并排的信息
示例
现在让我们看一些例子来了解更多关于DIV并排的信息：
<!DOCTYPE html>
<html>
<head>
<title>HTML div</title>
</head>
<body>
<div style="width: 100px; float:left; height:100px; background:gray; margin:10px">
First DIV
</div>
<div style="width: 100px; float:left; height:100px; background:yellow; margin:10px">
Second DIV
</div>
</body>
</html>
运行以上代码后，我们将看到两个DIV标签并排显示，每个标签都有不同的背景颜色和指定的文本。
示例
以下是另一个示例，演示如何将DIV标签并排放置：
<html>
<head>
<title>Tutorialspoint</title>
<style type=text/css>
.leftdivision
{
float: left;
}
.rightdivision
{
float: left;
background-color:gray
}
div {
padding : 5%;
color: black;
background-color: pink;
width: 30%;
border: solid black;
}
</style>
</head>
<body>
<div class="leftdivision">
<h1>HTML5</h1>
<p>HTML5 is hyper text markup language latest version, By using HTML we can create our own websites. It describes the structure of web pages.</p>
</div>
<div class="rightdivision">
<h1>Cascading Style Sheets</h1>
<p>CSS full form is Cascading Style Sheets, It helps in how HTML elements has to be displayed on screen, It controls the layouts of multiple web pages.</p>
</div>
</body>
</html>
执行以上代码后，将显示两个DIV标签并排显示，具有不同的背景颜色和特定的文本，但与前面的示例相比，这些DIV标签的高度和宽度有所不同。
更新于：2023年9月29日
49K+ 浏览量
广告