Home > Article > Web Front-end > How can we put two parts side by side in HTML?
How can we put two parts side by side in HTML?
- 王林forward
- 2023-08-31 16:25:011213browse
Tags define the divisions of an HTML document. This tag is primarily used to group similar content together for easier styling. It also serves as a container for HTML elements and we can easily style this tag using class or id attributes. We can place content inside tags.
Using CSS properties, we can place two tags side by side in HTML.
Through style settings, we can place two divided classes side by side.
grammar
The following is the syntax of the tag.
<div class='division'>Content…</div>
Example 1
The following is an example of using CSS properties to place two divided classes side by side in 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>
The following is the output of the above example program.
Example 2
In another example of adding two tags side by side, we use CSS properties to style them by setting the height to 100px and setting the margin using 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>
Add parent tag
We can also add a parent to place two divisions. Here the parent tag acts as a container for child classes (HTML elements).
We can also use CSS properties to style the parent .
grammar
The following is the syntax for the parent tag, which contains two child tags.
<div class='division'>Content…</div> <div class='division'>Content…</div>
Example 1
Given below is an example of placing two tags side by side in HTML, in this program we use parent class to add more styles in HTML document.
<!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>
The following is the output of the above example program.
Example - by creating a split screen
Given below is an example of placing two div tags side by side by splitting the screen in half.
<!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>
The following is the output of the above example program.
The above is the detailed content of How can we put two parts side by side in HTML?. For more information, please follow other related articles on the PHP Chinese website!