问题
I want the 4 classes in the middle column to be under the class in the first column and then for "The Information Technology track consists of..." to be moved to the top of the column. How can iI do this?
Here is what my code currently produces:
Here is my HTML for this specific page:
<!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>
Here is my 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;
}
回答1:
This answer not only uses flexbox, but also shows a generic structure for creating a flexbox app. The main functionalities have been split for clarity. With the comment inside the code you should have enough to get you well on the way.
With your permission I would like to use your HTML in a CodePen example. Please let me know whether you object.
/************************************************/
/*
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>来源：https://stackoverflow.com/questions/36962174/how-can-i-stop-my-column-content-from-wrapping-to-a-new-column