我希望中间栏中的 4 个类(class)位于第一栏中的类(class)之下，然后将“信息技术轨道由...组成”移动到该栏的顶部。我该怎么做？
这是我的代码当前生成的内容:
这是我针对这个特定页面的 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>
这是我的 CSS:
.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;
}
最佳答案
这个答案不仅使用了 flexbox，还展示了创建 flexbox 应用程序的通用结构。为清楚起见，主要功能已拆分。有了代码中的注释，您应该已经足够让您顺利上路了。
如果您允许，我想在 CodePen 示例中使用您的 HTML。如果您反对，请告诉我。
/************************************************/
/*
Software Design: Define the Generic Rule ....
*/
html,body { box-sizing: border-box; width: 100% }
body { max-width: 100%; margin: 0 auto }
*:before, *,
*:after { box-sizing: inherit }
/************************************************/
/* easy RESPONSIVE|FONT|NESS */
/************************************************/
/* Responsive font: y = mx + b
FONTSIZE
minimum : 10px on 320px displays and below
sizing : +1px every 160px display width
scale to: 16px on 1280px displays
=> Starting with 8px, add 1px to font-size each
160px of display width.
*/
html { font-size: calc(0.00625 * 100vmin + 8px) }
body { font-size: 1rem; line-height: normal } /* resets font after resize */
/* (That's it... Yes way! You saw it here first) */
/************************************************/
/* BONUS 1: BASIC FLEXBOX APP STRUCTURE */
/************************************************/
/*
Can be any kind of container element (div, ul, table, etc.)
In this case they are: main, header, article and footer
(plus section and item for this demo)
*/
/* flexbox */
main, header, article, section, item, footer { display: flex } /* Flexbox rules! */
main { justify-content: space-between; flex-direction: column } /* quirks below */
article { flex: 1; flex-flow: row wrap } /* fill all available space */
header, footer { justify-content: center; align-items: center } /* hor/vert alignment */
/* flexbox optional rule */
article { align-content: flex-start; align-items: flex-start }
section { flex-flow: row wrap; } /* A row of columns */
item { flex-flow: column wrap; /* A column of row */
flex: 1 1 20em } /* Nice minimal width for smaller displays */
/* generic sizing */
html, body { width: 100%; height: 100% } /* plus below 'min-,max-' quirk */
main, header, footer, article { width: 100%; max-width: 100%;
min-height: 100% } /* 'min-,max-' cross-browser quirks */
section, item { width: 100% } /* fill all given space */
/* generic styling */
html { background-color: #eee; color: hsla(0,0%,0%,.87) }
body { margin: 0; padding: 0; cursor: default } /* We'll take care of that, thank you! */
article { max-width: 85%; margin: 0 auto; } /* center in 'main' */
/*
USAGE:
<main>
<header>some header</header>
<article>
<section>
<item></item>
<item></item>
</section>
<section>
<item></item>
<item></item>
</section>
</article>
<footer>some footer</footer>
</main>
*/
/************************************************/
/*
.... and Anticipate the Exception
*/
/************************************************/
/* Content RULES */
/************************************************/
/* Please, don't use black on green, it is hurtfull (and hidious) */
/* specific styling */
header , footer { min-height: 3em; background-color: hsla(31,31%,15%,.6); color: white }
header > *, footer > * { flex: 1 1 20em; margin: 0 1em; text-align: center }
h2,h3,h4 { color: hsla(0,0%,0%,.54)}
item { margin: 1em; padding: 1em;
background: hsla(0,0%,100%,.7);
border: 1px solid hsla(0,0%,50%,.1); border-radius: .5em }
ul { padding: 0 0 0 2em }
li span { color: hsla(205,96%,26%,.87);
font-family: monospace; font-weight: bold }
a { text-decoration: none; color: white; cursor: pointer }
#header--advert { color: hsla(0,0%, 0%,.87); font-size: 1.5em; text-align: right }
#header--advert span { color: hsla(0,0%,100%,.87) }
#section--courses {}
#courses-item--core { align-items: center }
#section--tracks {}
#tracks-item--business {}
#tracks-item--it {}
#tracks-item--web {}
/************************************************/
/* BONUS 2: LETTERPRESS font weight */
/************************************************/
/* Ever so slight font touch-up */
li { text-shadow: .1px .1px .3px hsla(0,0%,25%,.1),
-.1px -.1px .1px hsla(0,0%,25%,.1) }
li span { text-shadow: none } /* already bold */
/************************************************/
/* easy Debugging */
/************************************************/
/* Just for easy debugging, add/remove slash at start to see effect */
/* { outline: .001em dashed black; transition: all .5s ease-in-out } /**/<main>
<header>
<div id="header--advert">some header</div>
</header>
<article>
<section id="section--courses">
<item id="courses-item--core">
<h2>
Each track requires the following 30 hours of core courses:
</h2>
<ul>
<li><span>CPSC 130 </span>Introduction to Computer Science</li>
<li><span>CPSC 131 </span>Computer Programming and Computer Science Concepts I</li>
<li><span>CPSC 231 </span>Computer Programming and Computer Science Concepts II</li>
<li><span>CPSC 290 </span>Data Structures</li>
<li><span>CPSC 301 </span>Computer Architecture</li>
<li><span>CPSC 304 </span>Operating Systems</li>
<li><span>CPSC 322 </span>Software Engineering</li>
<li><span>CPSC 341 </span>Networking</li>
<li><span>CPSC 430 </span>Database Design and Implementation</li>
<li><span>CPSC 460 </span>Senior Seminar</li>
</ul>
</item>
</section>
<section id="section--tracks">
<item id="tracks-item--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><span>ACCT 211 </span>Principles of Accounting I</li>
<li><span>BUS 240 </span>Statistics for Business</li>
<li><span>MATH 140 </span>Introduction to Statistics</li>
<li><span>BUS 342 </span>Management Principles</li>
<li><span>MATH 210 </span>Discrete Mathematics</li>
</ul>
<h4>Any two courses from among:</h4>
<ul>
<li><span>BUS 311 </span>Marketing</li>
<li><span>BUS 332 </span>Business Finance</li>
<li><span>BUS 371 </span>Management of Information Systems</li>
<li><span>BUS 423 </span>Operations Management</li>
<li><span>BUS 445 </span>Business Analytics: Management Science</li>
</ul>
</item>
<item id="tracks-item--it">
<h3>The Information Technology Track consists of the 30-hour
core plus the courses listed below.</h3>
<h4> Required Courses:</h4>
<ul>
<li><span>CPSC 313 </span> Analysis and Design of Algorithms</li>
<li><span>MATH 140 </span> Introduction to Statistics</li>
<li><span>MATH 303 </span> Probability and Statistics I</li>
<li><span>MATH 201 </span> Calculus I</li>
<li><span>MATH 202 </span> Calculus II</li>
<li><span>MATH 210 </span> Discrete Mathematics</li>
</ul>
</item>
<item id="tracks-item--web">
<h3>The Web Development Track consists of the 30-hour
core plus the courses listed below.</h3>
<h4> Required Courses:</h4>
<ul>
<li><span>ART 271 </span>Graphics I: Visual Design</li>
<li><span>CPSC 346 </span>Web Programming: Client Side</li>
<li><span>CPSC 347 </span>Web Programming: Server Side</li>
<li><span>CPSC 411 </span>Server Operating Systems: LINUX Systems</li>
<li><span>MATH 140 </span>Introduction to Statistics</li>
<li><span>MATH 210 </span>Discrete Mathematics</li>
<li><span>COMM 230 </span>Mass Media and Society</li>
<li><span>MDCM 351 </span>Web design & Social media</li>
</ul>
</item>
</section>
</article>
<footer>
<div id="footer--copyright">Copyright © - 2016 by <a href="javascript:void(0)">me!</a></div>
</footer>
</main>关于html - 如何阻止我的专栏内容换行到新专栏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36962174/