Home > Article > Web Front-end > How can we put three parts side by side in HTML?
How can we put three parts side by side in HTML?
- WBOYforward
- 2023-09-04 23:21:05960browse
Tags define the divisions of an HTML document. This tag is primarily used to group similar content together for easy styling, and also serves as a container for HTML elements.
We use the CSS property to place three section tags side by side in the HTML. The CSS property float is used for this purpose.
grammar
The following is the syntax of the The following is an example of using CSS properties to place three partition classes side by side in HTML. The following is the output of the above example program. We change the style by using CSS properties, and we can also override style properties. Another example of placing three tags side by side on an HTML page is as follows - The following is an example of using CSS properties to place three partition classes side by side in HTML. The following is the output of the above example program. <div class='division'>Content…</div>
The Chinese translation of Example 1
is: Example 1
<!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 class='division'>div tag 3</div>
</div>
</body>
</html>
Example 2
is: Example 2
<!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>
<div style="width: 100px; float:left; height:100px; background:red; margin:10px">
Third DIV
</div>
</body>
</html>
Example 3 - By creating a split screen
<!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: 50%;
background-color: yellowgreen;
}
.middle{
background-color: blueviolet
}
.right {
right: 25%;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="split left">
</div>
<div class="split middle"></div>
<div class="split right">
</div>
</body>
</html>
The above is the detailed content of How can we put three parts side by side in HTML?. For more information, please follow other related articles on the PHP Chinese website!