Html 如何阻止我的列内容换行到新列？我希望中间列中的4个类在第一列中的类下，然后是“信息技术轨道由……”移动到列的顶部。我怎么能这样做_Html_Css_Css Multicolumn Layout

Html 如何阻止我的列内容换行到新列？我希望中间列中的4个类在第一列中的类下，然后是“信息技术轨道由……”移动到列的顶部。我怎么能这样做

html css

Html 如何阻止我的列内容换行到新列？我希望中间列中的4个类在第一列中的类下，然后是“信息技术轨道由……”移动到列的顶部。我怎么能这样做,html,css,css-multicolumn-layout,Html,Css,Css Multicolumn Layout,以下是我的代码当前生成的内容：以下是我针对此特定页面的HTML： <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="cpsc.css"> </head <body> <h2 align=center> Each track requires the following 30 hours of core co

以下是我的代码当前生成的内容：

以下是我针对此特定页面的HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="cpsc.css">
</head

<body>
<h2 align=center>
Each track requires the following 30 hours of core courses:
</h2>

<ul class=center>
    <li>CPSC 130 - Introduction to Computer Science</li>
    <li>CPSC 131 - Computer Programming and Computer Science Concepts I</li>
    <li>CPSC 231 - Computer Programming and Computer Science Concepts II</li>
    <li>CPSC 290 - Data Structures</li>
    <li>CPSC 301 - Computer Architecture</li>
    <li>CPSC 304 - Operating Systems</li>
    <li>CPSC 322 - Software Engineering</li>
    <li>CPSC 341 - Networking</li>
    <li>CPSC 430 - Database Design and Implementation</li>
    <li>CPSC 460 - Senior Seminar</li>
</ul><br>

<div class=tracks>
<section id=business>
<h3>The Business Information Systems Track consists of the 30-hour
core plus the courses listed below.</h3>
<h4> Required Courses:</h4>
<ul>
    <li>ACCT 211 - Principles of Accounting I</li>
    <li>BUS 240 - Statistics for Business</li>
    <li>MATH 140 - Introduction to Statistics</li>
    <li>BUS 342 - Management Principles</li>
    <li>MATH 210 - Discrete Mathematics</li>
</ul>

<h4>Any two courses from among:</h4>
<ul>
    <li>BUS 311 - Marketing</li>
    <li>BUS 332 - Business Finance</li>
    <li>BUS 371 - Management of Information Systems</li>
    <li>BUS 423 - Operations Management</li>
    <li>BUS 445 - Business Analytics:  Management Science</li>
</ul>
</section>

<section id=it>
<h3>The Information Technology Track consists of the 30-hour
core plus the courses listed below.</h3>
<h4> Required Courses:</h4>
<ul>
    <li>CPSC 313 - Analysis and Design of Algorithms</li>
    <li>MATH 140 - Introduction to Statistics</li>
    <li>MATH 303 - Probability and Statistics I</li>
    <li>MATH 201 - Calculus I</li>
    <li>MATH 202 - Calculus II</li>
    <li>MATH 210 - Discrete Mathematics</li>
</ul>
</section>

<section id=web>
<h3>The Web Development Track consists of the 30-hour
core plus the courses listed below.</h3>
<h4> Required Courses:</h4>
<ul>
    <li>ART 271 - Graphics I: Visual Design</li>
    <li>CPSC 346 - Web Programming: Client Side</li>
    <li>CPSC 347 - Web Programming: Server Side</li>
    <li>CPSC 411 - Server Operating Systems: LINUX Systems</li>
    <li>MATH 140 - Introduction to Statistics</li>
    <li>MATH 210 - Discrete Mathematics</li>
    <li>COMM 230 - Mass Media and Society</li>
    <li>MDCM 351 - Web design & Social media</li>
</ul>
</section>
</div>
</body>
</html>

这个答案不仅使用flexbox，还显示了创建flexbox应用程序的通用结构。为清晰起见，主要功能已拆分。有了代码中的注释，您应该有足够的时间来顺利完成任务

如果您允许，我想在CodePen示例中使用您的HTML。请告诉我你是否反对

/************************************************/
/*
软件设计：定义通用规则。。。。
*/
html，正文{框大小：边框框；宽度：100%}
正文{最大宽度：100%；边距：0自动}
*：之前，*，
*：在{框大小：继承}之后
/************************************************/
/*轻松响应|字体|流畅*/
/************************************************/
/*响应字体：y=mx+b
字体大小
最小值：320px及以下显示器上的10px
尺寸：+1px每160px显示宽度
在1280px显示器上缩放至：16px
=>从8px开始，每个字体大小增加1px
160像素的显示宽度。
*/
html{font size:calc（0.00625*100vmin+8px）}
正文{font size:1rem；行高：normal}/*在调整大小后重置字体*/
/*（就是这样……是的方式！你先在这里看到的）*/
/************************************************/
/*奖励1：基本FLEXBOX应用程序结构*/
/************************************************/
/*
可以是任何类型的容器元素（div、ul、table等）
在本例中，它们是：main、header、article和footer
（加上本演示的部分和项目）
*/
/*flexbox*/
主、页眉、文章、节、项、页脚{display:flex}/*Flexbox规则*/
main{justify content:space-between；flex-direction:column}/*下面的怪癖*/
文章{flex:1；flex-flow:row-wrap}/*填充所有可用空间*/
页眉、页脚{对齐内容：居中；对齐项目：居中}/*水平/垂直对齐*/
/*flexbox可选规则*/
文章{align content:flex start；align items:flex start}
节{flex flow:row wrap；}/*一行列*/
项{flex flow:column wrap；/*行的一列*/
flex:1 1 20em}/*对于较小的显示器，最小宽度很好*/
/*通用尺寸*/
html，正文{宽度：100%；高度：100%}/*加上低于“最小值”、“最大值”的怪癖*/
主、页眉、页脚、文章{宽度：100%；最大宽度：100%；
最小高度：100%}/*'最小-'最大-'跨浏览器怪癖*/
节，项目{宽度：100%}/*填充所有给定空间*/
/*通用样式*/
html{背景色：#eee；颜色：hsla（0,0%，0%，0.87）}
body{margin:0；padding:0；cursor:default}/*我们会处理好的，谢谢*/
文章{最大宽度：85%；边距：0自动；}/*在“主”中居中*/
/*
用法：
某个标题

.center {
    text-align: center;
    list-style-position: inside;
}

#web {
    float: right;
}

#it {
    float: center;
}

#business {
    float: left;
}

.tracks {
    column-count: 3;
    column-gap: 40px;
    column-rule-style: solid;
    column-rule-width: 1px;
    column-width: 100px;
}