Question

我希望中间列中的4个类位于第一列中的类之下，然后是＃34;信息技术轨道包含...＆＃34;要移动到列的顶部。我怎么能这样做？

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

以下是此特定网页的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;
}

Answer 1

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

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

＆＃13;

/************************************************/
/*

    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 } /**/

＆＃13;

<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&nbsp; </span>Statistics for Business</li>
                    <li><span>MATH 140      </span>Introduction to Statistics</li>
                    <li><span>BUS 342&nbsp; </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 &nbsp;</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 &amp; Social media</li>
                </ul>
            </item>
       </section>
    </article>

    <footer>
        <div id="footer--copyright">Copyright &copy; - 2016 by&nbsp;<a href="javascript:void(0)">me!</a></div>
    </footer>
</main>

＆＃13;

如何阻止我的列内容换行到新列？

1 个答案: