我们如何在HTML中将两个部分并排放置？
- 王林转载
- 2023-08-31 16:25:011218浏览
标签定义 HTML 文档的划分。该标签主要用于将相似的内容分组在一起，以便于设计样式。它还用作 HTML 元素的容器，我们可以使用 class 或 id 属性轻松地设置此标签的样式。我们可以将内容放置在 标记内。
使用CSS属性，我们可以在HTML中并排放置两个标签。
通过样式设置，我们可以并排放置两个划分类。
语法
以下是 标记的语法。
<div class='division'>Content…</div>
示例 1
以下是使用 CSS 属性在 HTML 中并排放置两个划分类的示例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.division {
display: inline-block;
border: 1px solid red;
padding: 1rem 1rem;
</style>
</head>
<body>
<!--<div class='parent'>-->
<div class='division'>div tag 1</div>
<div class='division'>div tag 2</div>
<!--</div>-->
</body>
</html>
以下是上述示例程序的输出。
示例 2
在并排添加两个 标签的另一个示例中，我们使用 CSS 属性来设置其样式，方法是将高度设置为 100px，并使用 set_margin 设置边距 -
<!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>
添加父标签
我们还可以添加一个父级来放置两个分班。这里父 标签充当子类（HTML 元素）的容器。
我们还可以使用 CSS 属性设置父级 的样式。
语法
以下是父 标记的语法，其中包含两个子 标记。
<div class='division'>Content…</div> <div class='division'>Content…</div>
示例 1
下面给出了一个在 HTML 中并排放置两个 标记的示例，在此程序中我们使用父类在 HTML 文档中添加更多样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
border: 1rem solid green;
margin: 1rem;
padding: 1rem 1rem;
text-align: center;
}
.division {
display: inline-block;
border: 1px solid aquamarine;
padding: 1rem 1rem;
}
</style>
</head>
<body>
<div class='parent'>
<div class='division'>div tag 1</div>
<div class='division'>div tag 2</div>
</div>
</body>
</html>
以下是上述示例程序的输出。
示例 - 通过创建分屏
下面给出了一个示例，通过将屏幕分成两半来并排放置两个 div 标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.split {
height: 100%;
width: 50%;
position: fixed;
top: 0;
}
.left {
left: 0;
background-color: yellowgreen;
}
.right {
right: 0;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="split left">
</div>
<div class="split right">
</div>
</body>
</html>
以下是上述示例程序的输出。
以上是我们如何在HTML中将两个部分并排放置？的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文转载于：tutorialspoint.com。如有侵权，请联系admin@php.cn删除