Html 定位列/文本段落？

我正在尝试为文本段落制作专栏，我发现了一种使用position:absolute的方法，但不幸的是，随着屏幕大小的增大/减小，它会四处移动。做专栏最好的方法是什么？在这种情况下，他们为什么不排队呢

.italic2{字体系列：衬线；颜色：#cc9900；字体大小：18px；宽度：150px；}
.header3{字体系列：helvetica；字体大小：17px；字母间距：3px；}
#纵队{
文本对齐：左对齐；
线高：1.5；
宽度：35%；
位置：绝对位置；
浮动：左；
左：12%；
}  	  
#专栏1{
文本对齐：左对齐；
线高：1.5；
宽度：35%；
浮动：左；
位置：绝对位置；
左：62%；
}

英语课堂网站

欢迎来到英语课堂网站，英语学生们他们说通往地狱的道路是由良好的意愿铺就的&如果你觉得这个网站缺少很多东西，它永远不会更新，或者你宁愿看油漆干，至少我试过了。有一段时间。（在地狱里）

英语课程网站旨在汇集我们在许多英语课程中已经合作或可能合作的所有令人兴奋的主题、信息和材料，无论是文学、电影、音乐、电视剧、视频游戏等。它还提供了如何分析不同类型文本的技巧和技巧，以及如何自己写文章的信息。希望它在你准备考试时会有用。如果你不是一个学生，并且偶然发现了这个网站，你当然非常欢迎浏览这些内容，但是请记住，英语课堂网站只是为了让学生和至少一位老师的生活更轻松。此外，如果您代表任何版权机构，并认为任何，无意的，我必须补充，版权侵权发生，我更愿意被联系在aaa@aaa.com而不是被起诉。

列不对齐的原因是您随意使用了

标记。在每一列中的文本周围加上适当的开头和结尾p标记将使它们变直

<div id="header"> 
<p><span class="italic"><i>the</i></span><span class="header1">&nbsp ENGLISH CLASS WEBSITE</span><br><br><div id="header2"> <span class="italic2"><i> Welcome to the English Class Website, English Students <img src="assets/img/smilingheart.png" height="20px" width="20px"> They say that the road to hell is paved with good intentions & if you ever feel like a lot of things are missing on this site, that it is never updated or you would rather go watch paint dry, well at least I tried. For a while. (It's in hell)</i></span></p>
</div>

<div id="column"><span class="textfont"><p>The English Class Website aims to assemble some of all the exciting subjects, information and materials, be it literature, films, music, TV-series, video games etc., that we already have been working with, or potentially could be working with, during our many English lessons together. It also provides tips and tricks on how to analyse different genres and types of texts as well as information on how to write essays yourself. Hopefully, it will be of use when you are getting ready for the exams.</p></div>

<div id="column1">
<p>If you are not a student and have stumbled upon this site by accident, you are of course more than welcome to browse through the contents, but please keep in mind that The English Class Website is only intended to make life easier for students and, well at least one teacher. Furthermore, if you represent any copyright institutions and feel that any, unintentional I must add, copyright infringement occurs I would much prefer to be contacted at aaa@aaa.com rather than sued.</p>
</div>

</div>

英语课堂网站

欢迎来到英语课堂网站，英语学生们他们说通往地狱的道路是由良好的意愿铺就的&如果你觉得这个网站缺少很多东西，它永远不会更新，或者你宁愿看油漆干，至少我试过了。有一段时间。（在地狱里）

英语课程网站旨在汇集我们在许多英语课程中已经合作或可能合作的所有令人兴奋的主题、信息和材料，无论是文学、电影、音乐、电视剧、视频游戏等。它还提供了如何分析不同类型文本的技巧和技巧，以及如何自己写文章的信息。希望它在你准备考试时会有用

如果你不是一个学生，并且偶然发现了这个网站，你当然非常欢迎浏览这些内容，但是请记住，英语课堂网站只是为了让学生和至少一位老师的生活更轻松。此外，如果您代表任何版权机构，并认为任何，无意的，我必须补充，版权侵权发生，我更愿意被联系在aaa@aaa.com而不是被起诉

您可以使用

列宽

设置容器元素的基本列大小，并允许宽度+视口宽度来确定屏幕将显示多少列。如果需要固定的列数（仅2列），可以设置

列数

以设置特定的列数，并允许动态更改宽度

下面是一个如何同时使用它们的示例

使用代码笔播放视口的宽度

.italic2{
字体系列：衬线；
颜色：#cc9900；
字号：18px；
宽度：150px；
}
.校长3{
字体系列：helvetica；
字号：17px；
字母间距：3px；
}
#纵队{
列宽：150px；
文本对齐：左对齐；
线高：1.5；
}
#第2栏{
列数：2；
文本对齐：左对齐；
线高：1.5；
}
.集装箱{
最大宽度：70vw；
保证金：20px自动；
}

这个
&英语课堂网站



欢迎来到英语课堂网站，英语学生
他们说通往地狱的路是由良好的意愿铺就的&如果你觉得这个网站缺少很多东西，
它永远不会更新，或者你宁愿去看油漆干，至少我试过了。有一段时间。（在地狱里）
英语课程网站旨在汇集所有令人兴奋的主题，
信息和材料，包括文学、电影、音乐、电视剧、视频游戏等。
我们已经合作或可能合作的项目，
我们一起上了很多英语课。它还提供了有关如何
分析不同类型的文本，以及如何撰写论文的信息
你自己希望它在你准备考试时会有用。
如果你不是一个学生，并且偶然发现了这个网站，你是
欢迎浏览课程内容，但请记住
英语课堂网站只是为了让学生的生活更轻松，
至少有一位老师。此外，如果您代表任何版权机构和
我必须补充一点，如果我觉得有任何非故意的侵犯版权的情况发生，我更愿意这样做
联系地址：aaa@aaa.comR