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

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

王林

Release： 2023-08-31 16:25:01

forward

1174 people have browsed it

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.

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

grammar

The following is the syntax of the tag.

<div class='division'>Content…</div>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!