如何停止将列内容包装到新列? [英] How can I stop my column content from wrapping to a new column?
本文介绍了如何停止将列内容包装到新列?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我希望中间一列的4个类位于第一列的类之下，然后将信息技术轨道由...组成"移动到该列的顶部.我该怎么办?
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:
这是此特定页面的HTML:
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>
这是我的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应用程序的通用结构.为了清楚起见，已对主要功能进行了拆分.在代码中包含注释，您应该有足够的方法使您顺利进行.
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.
在您允许的情况下，我想在CodePen示例中使用您的HTML.请让我知道您是否反对.
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>这篇关于如何停止将列内容包装到新列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
