How can we put three parts side by side in HTML?-HTML Tutorial-php.cn

Table of Contents

grammar

Example 2

Example 3 - By creating a split screen

Home

Web Front-end

HTML Tutorial

How can we put three parts side by side in HTML?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 04, 2023 pm 11:21 PM

html part side by side

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.

How can we put three parts side by side in HTML?

grammar

The following is the syntax of the

tag.
<div class='division'>Content…</div>
Copy after login
The Chinese translation of
Example 1
is:
Example 1

The following is an example of using CSS properties to place three partition 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> .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>
Copy after login

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.
The Chinese translation of
Example 2
is:
Example 2

Another example of placing three tags side by side on an HTML page is as follows -

<!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>
Copy after login

Example 3 - By creating a split screen

The following is an example of using CSS properties to place three partition 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> .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>
Copy after login

The following is the output of the above example program.

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn