Question

我正在尝试为文本段落做专栏，我已经找到了一种方法来使用position：absolute，但是当屏幕尺寸更大/更小时，它会移动而不幸。列的最佳方法是什么？为什么他们在这种情况下排队？

＆＃13;

.italic2{font-family: serif; color: #cc9900; font-size:18px; width: 150px;}

 .header3{font-family: helvetica; font-size:17px;     letter-spacing: 3px;}
 
 #column{
	  text-align:left;
	  line-height: 1.5;
	  width: 35%;
      position: absolute;
 float: left; 
	  left: 12%; 

}  	  

 #column1{
	  text-align:left;
	  line-height: 1.5;
	  width: 35%;
    float: left; 
      position: absolute;
	  left: 62%; 



}

＆＃13;

 <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. </div><div id="column1">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.
            </div></div>

＆＃13;

哎呀。为什么这个jsfiddle的东西永远不适合我？

Answer 1

您可以使用column-width在容器元素上设置基本列大小，并允许宽度+视口宽度来确定屏幕显示的列数。如果您想要固定数量的列（仅2个），则可以设置column-count以设置特定的列数并允许宽度动态更改。

以下是如何使用它们的示例。

使用codepen来播放视口的宽度 https://codepen.io/neilkalman/pen/OZyvRK/left

.italic2 {
  font-family: serif;
  color: #cc9900;
  font-size: 18px;
  width: 150px;
}

.header3 {
  font-family: helvetica;
  font-size: 17px;
  letter-spacing: 3px;
}

#column {
  column-width: 150px;
  text-align: left;
  line-height: 1.5;
}

#column-2 {
  column-count: 2;
  text-align: left;
  line-height: 1.5;
}

.container {
  max-width: 70vw;
  margin: 20px auto;
}

<div id="header">
  <span class="italic">
    <em>the</em>
  </span>
  <span class="header1">&nbsp ENGLISH CLASS WEBSITE</span>
  <br><br>
  <div id="header2">
    <span class="italic2">
      <em>
        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)
      </em>
    </span>
  </div>
</div>
<div class="container">
  <div id="column">
    <span class="textfont">
      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.
      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.
    </span>
  </div>
</div>
<div class="container">
  <div id="column-2">
    <span class="textfont">
      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.
      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.
    </span>
  </div>
</div>

在撰写此答案时，

column-width和column-count具有良好的浏览器兼容性： - ）

https://caniuse.com/#search=column-width

Answer 2

列不排列的原因是您随机使用

标记。使用正确的打开和关闭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>

列/文本段落？

2 个答案: