如何使用HTML和CSS将文本分成两列布局

在HTML中，我们可以使用div元素来创建网页上的列分区部分。在div盒子中填充文本时，使用了段落元素。然后使用内部CSS样式化HTML元素的属性。这种类型的示例用于显示差异化的问题，并通过代码进行了设计以获得更好的外观。

语法

以下语法用于示例 –

<div></div>

div 元素指定了HTML页面中的一个分割或区块。

<p>…..write some text….</p>

p 元素定义了用户可以在其中写一些文本的段落。

使用的属性

以下属性在示例中使用-

margin - 此属性定义元素的边距。
padding - 此属性用于定义边框与其内容之间的空间。
width - 我们可以使用此属性来定义div元素的宽度。
float - 此属性定义div元素的左侧或右侧位置。
background-color - 定义元素的背景颜色。
color - 定义文本的颜色。
font-weight - 定义文本的粗体样式。
text-align - 此属性设置文本的水平对齐方式。
border-radius - 定义边框角的半径。

示例

在这个示例中，我们将创建两个div元素来表示两列布局。然后通过使用段落元素在两列中填充文本。为了设计两列布局的网页，我们将使用内部CSS来设置所有元素的属性。

<!DOCTYPE html>
<html>
<head>
   <title>Two column layout using HTML and CSS</title>
   <style>
      #container{
      width: 450px; }
      .col-1{
      width: 200px; float: left; color: green; font-weight: bold;
      text-align: center; margin: 10px; border-radius: 20px; background: yellow; }
      .col-2{
      width: 200px; float: right; color: green; font-weight: bold;
      text-align: center; margin: 10px; border-radius: 20px; background: orange; }  
      p{ font-size: 20px; }
   </style>
</head>
<body>
   <h1> Two Column Layout Using CSS </h1>
   <div id = "container">
      <div class = "col-1">
         <h1 class = "heading">COLUMN 1</h1>
         <p class = "paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      </div>
      <div class =  "col-2">
         <h1 class = "heading">COLUMN 2</h1>
         <p class="paragraph">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
      </div>
   </div>
</body>
</html>