数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 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>
结论
以上输出表示使用 div 元素的两列布局，以及使用段落元素在其中填充文本。为了设置所有 HTML 元素的属性，它使用了内部 CSS。这种类型的代码通常用于构建基于区分的问题的设计或基于两个不同事物的比较。
更新于：2023年6月8日
5K+ 次查看
广告