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

htmlcssweb developmentfront end technology更新于 2024/7/25 0:12:17

在 HTML 中，我们有一个 division 元素，可用于在网页上创建列分区。为了填充 div 框内的文本，我们使用了 paramage 元素。然后使用内部 CSS 设置 HTML 元素的属性样式。此类示例用于展示区分问题，以及何时通过代码设计以获得更好的外观。

语法

示例中使用了以下语法 -

<div></div>

div 元素指定 HTML 页面中的分区或部分。

<p>…..写一些文字….</p>

p 元素定义了用户可以在其上书写文本的段落。

使用的属性

示例中使用了以下属性 -

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

示例

在此示例中，我们将创建两个表示两列布局的分割元素。然后使用段落元素在两列中填充文本。为了设计两列布局的网页，我们将使用内部 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>