如何让我的div排队？

时间：2016-05-20 13:39:25

标签： javascript html css

我希望我的div排在最前面，但不排在底部。这允许内容的灵活性：

＆＃13;
＆＃13; 
/* font */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */

/* clear settings */
body {
  padding: 0;
  margin: 0;
  background: white;
}
/* end of clear settings */

/* nav */
  #nav {
    width: 1600px;
    height: 50px;
    background: #009ACD;
  }
/* end of nav */

/* info nav */
  #primary_nav_wrap
{
    width: 1600px;
  height: 50px;
  background: #1F1F1F;
}

#primary_nav_wrap ul
{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0;
    left: 3%;
    top: 5px;
}

#primary_nav_wrap ul a
{
    display:block;
    text-decoration:none;
    font-size:15px;
    padding: 10px 15px 10px 15px;
    font-family: 'Open Sans', sans-serif;
    color: white;
}

#primary_nav_wrap ul a:hover {
  background: white;
}

#primary_nav_wrap ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0;
}

#primary_nav_wrap ul li:hover a {
  color: black;
  background: white;
}

#primary_nav_wrap ul li a:hover {
  background: white;
}

#primary_nav_wrap ul ul li a:hover {
  background: #F4F4F4;
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0;
    margin-top: 0.2px;
    border: 1px solid #ccc;
    border-top: none;
    z-index: 50;
}

#primary_nav_wrap ul ul li
{
    float:none;
    width:200px;
    position: relative;
    left: 0px;
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:7.5px 9px;
}

#primary_nav_wrap ul ul ul
{
    top:0;
    left:100%
}

#primary_nav_wrap ul li:hover > ul
{
    display:block
}
/* end of info nav */

/* course div */
  #course_div {
    width: 1200px;
    position: relative;
    left: 180px;
    top: 30px;
    padding: 10px;
  }

  #course_img {
    width: 216px;
    height: 121.5px;
    border: 1px solid #ccc;
    border-bottom: none;
  }

  #course_info {
    border: 1px solid #ccc;
    width: 205.5px;
    padding: 5px;
    position: relative;
    top: -4px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
  }
  
  a .course_main {
     text-decoration: none;
    color: black;
    width: 204px;
  }

  .course_main {
    width: 216px;
    display: inline-block;
    margin-right: 30px;
     -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
  }

/* end of course div */
＆＃13; 
<!DOCTYPE html>
<html>
  <head>
    <title> Hacked Genius </title>
    <link rel='stylesheet' href='main.css'>
    <script src='main.js'></script>
  </head>

  <body>
    <!-- nav -->
      <div id='nav'>

      </div>
    <!-- end of nav -->

    <!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
  <li><a href="#">Development</a>
    <ul>
      <li><a href="#">Web Development</a></li>
      <li><a href="#">Mobile Apps</a></li>
      <li><a href="#">Programming Languages</a></li>
      <li><a href="#">Game Development</a></li>
      <li><a href="#">Databases</a></li>
      <li><a href="#">Software Testing</a></li>
      <li><a href="#">Software Engineering</a></li>
      <li><a href="#">Development Tools</a></li>
      <li><a href="#">E-Commerce</a></li>
    </ul>
  </li>
  <li><a href="#">Business</a>
    <ul>
      <li><a href="#">Finance</a></li>
      <li><a href="#">Entrepreneurship</a></li>
      <li><a href="#">Communications</a></li>
      <li><a href="#">Management</a></li>
      <li><a href="#">Sales</a></li>
      <li><a href="#">Strategy</a></li>
      <li><a href="#">Operations</a></li>
      <li><a href="#">Project Management</a></li>
      <li><a href="#">Business Law</a></li>
      <li><a href="#">Data and Anylytics</a></li>
      <li><a href="#">Home Business</a></li>
      <li><a href="#">Human Resources</a></li>
      <li><a href="#">Industry</a></li>
      <li><a href="#">Media</a></li>
      <li><a href="#">Real Estate</a></li>
      <li><a href="#">Other</a></li>
    </ul>
  </li>
  <li><a href="#">IT & Software</a>
    <ul>
      <li class="dir"><a href="#">IT Certification</a></li>
      <li class="dir"><a href="#">Network & Security</a>
      <li><a href="#">Hardware</a></li>
      <li><a href="#">Operating Systems</a></li>
      <li><a href="#">Other</a></li>
</ul>
<li><a href="#">Office Productivity</a>
    <ul>
      <li class="dir"><a href="#">Microsoft</a></li>
      <li class="dir"><a href="#">Apple</a>
      <li><a href="#">Google</a></li>
      <li><a href="#">SAP</a></li>
      <li><a href="#">Intuit</a></li>
      <li><a href="#">Salesforce</a></li>
      <li><a href="#">Oracle</a></li>
      <li><a href="#">Other</a></li>
</ul>
<li><a href="#">Personal Development</a>
    <ul>
      <li class="dir"><a href="#">Personal Transformation</a></li>
      <li class="dir"><a href="#">Productivity</a>
      <li><a href="#">Leadership</a></li>
      <li><a href="#">Personal Finance</a></li>
      <li><a href="#">Career Development</a></li>
      <li><a href="#">Parenting & Relationships</a></li>
      <li><a href="#">Happiness</a></li>
      <li><a href="#">Religion & Spirituality</a></li>
      <li><a href="#">Personal Brand Building</a></li>
      <li><a href="#">Creativity</a></li>
      <li><a href="#">Influence</a></li>
      <li><a href="#">Self Esteem</a></li>
      <li><a href="#">Stress Management</a></li>
      <li><a href="#">Memory and Study Skills</a></li>
      <li><a href="#">Motivation</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Design</a>
    <ul>
      <li class="dir"><a href="#">Web Design</a></li>
      <li class="dir"><a href="#">Graphic Design</a>
      <li><a href="#">Design Tools</a></li>
      <li><a href="#">User Experience</a></li>
      <li><a href="#">Game Design</a></li>
      <li><a href="#">Design Thinking</a></li>
      <li><a href="#">3D & Animation</a></li>
      <li><a href="#">Fashion</a></li>
      <li><a href="#">Architectural Design</a></li>
      <li><a href="#">Interior Design</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Marketing</a>
    <ul>
      <li class="dir"><a href="#">Digital Marketing</a></li>
      <li class="dir"><a href="#">Search Engine Optimization</a>
      <li><a href="#">Social Media Marketing</a></li>
      <li><a href="#">Branding</a></li>
      <li><a href="#">Marketing Fundamentals</a></li>
      <li><a href="#">Analystics & Automation</a></li>
      <li><a href="#">Public Relations</a></li>
      <li><a href="#">Advertising</a></li>
      <li><a href="#">Video & Mobile Marketing</a></li>
      <li><a href="#">Content Marketing</a></li>
      <li><a href="#">Non-Digital Marketing</a></li>
      <li><a href="#">Growth Hacking</a></li>
      <li><a href="#">Affiliate Marketing</a></li>
      <li><a href="#">Product Marketing</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Lifestyle</a>
    <ul>
      <li class="dir"><a href="#">Life Hacks</a></li>
      <li class="dir"><a href="#">Arts & Crafts</a></li>
      <li class="dir"><a href="#">Food & Beverage</a>
      <li><a href="#">Beauty & Makeup</a></li>
      <li><a href="#">Travel</a></li>
      <li><a href="#">Gaming</a></li>
      <li><a href="#">Home Improvement</a></li>
      <li><a href="#">Pet Care & Training</a></li>
</ul>

<li><a href="#">Photography</a>
    <ul>
      <li class="dir"><a href="#">Digital Photography</a></li>
      <li class="dir"><a href="#">Photography Fundamentals</a></li>
      <li class="dir"><a href="#">Portraits</a>
      <li><a href="#">Landscape</a></li>
      <li><a href="#">Black & White</a></li>
      <li><a href="#">Photography Tools</a></li>
      <li><a href="#">Mobile Photography</a></li>
      <li><a href="#">Travel Photography</a></li>
      <li><a href="#">Commercial Photography</a></li>
      <li><a href="#">Wedding Photography</a></li>
      <li><a href="#">Video Design</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Health & Fitness</a>
    <ul>
      <li class="dir"><a href="#">Fitness</a></li>
      <li class="dir"><a href="#">General Health</a></li>
      <li class="dir"><a href="#">Sports</a>
      <li><a href="#">Nutrition</a></li>
      <li><a href="#">Yoga</a></li>
      <li><a href="#">Mental Health</a></li>
      <li><a href="#">Dieting</a></li>
      <li><a href="#">Self Defense</a></li>
      <li><a href="#">Safety & First Aid</a></li>
      <li><a href="#">Dance</a></li>
      <li><a href="#">Meditation</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Language</a>
    <ul>
      <li class="dir"><a href="#">English</a></li>
      <li class="dir"><a href="#">Spanish</a></li>
      <li class="dir"><a href="#">German</a>
      <li><a href="#">French</a></li>
      <li><a href="#">Japanese</a></li>
      <li><a href="#">Portuguese</a></li>
      <li><a href="#">Chinese</a></li>
      <li><a href="#">Russian</a></li>
      <li><a href="#">Latin</a></li>
      <li><a href="#">Arabic</a></li>
      <li><a href="#">Hebrew</a></li>
      <li><a href="#">Italian</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Music</a>
    <ul>
      <li class="dir"><a href="#">Instruments</a></li>
      <li class="dir"><a href="#">Production</a></li>
      <li class="dir"><a href="#">Music Fundamentals</a>
      <li><a href="#">Vocal</a></li>
      <li><a href="#">Music Techniques</a></li>
      <li><a href="#">Music Software</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Academics</a>
    <ul>
      <li class="dir"><a href="#">Social Science</a></li>
      <li class="dir"><a href="#">Math & Science</a></li>
      <li class="dir"><a href="#">Humanities</a>
</ul>


</ul>
</nav>
    <!-- end of info nav -->

    <div id='course_div'>

   <a href='#'> <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

         <div id='course_info'>
          Excel Excel Excel Excel Excel Excel
          </div> </div></a>

         <a href='#'> <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

         <div id='course_info'>
          Hi
          </div> </div></a>


    </div>

  </body>
</html>
＆＃13;
＆＃13;
＆＃13;

在上面的示例中，我有两个div，但它们没有排成一行。如何排列顶部的div？我已经尝试了 flex 属性，但没有任何工作......

5 个答案:

答案 0 :(得分：2)

显示flex，完成工作。

请参阅下面的代码，了解更新后的显示屏。

＆＃13;
＆＃13; 
/* font */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

/* end of font */

/* clear settings */

body {
  padding: 0;
  margin: 0;
  background: white;
}
/* end of clear settings */

/* nav */

#nav {
  width: 1600px;
  height: 50px;
  background: #009ACD;
}
/* end of nav */

/* info nav */

#primary_nav_wrap {
  width: 1600px;
  height: 50px;
  background: #1F1F1F;
}
#primary_nav_wrap ul {
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  left: 3%;
  top: 5px;
}
#primary_nav_wrap ul a {
  display: block;
  text-decoration: none;
  font-size: 15px;
  padding: 10px 15px 10px 15px;
  font-family: 'Open Sans', sans-serif;
  color: white;
}
#primary_nav_wrap ul a:hover {
  background: white;
}
#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}
#primary_nav_wrap ul li:hover a {
  color: black;
  background: white;
}
#primary_nav_wrap ul li a:hover {
  background: white;
}
#primary_nav_wrap ul ul li a:hover {
  background: #F4F4F4;
}
#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 0;
  margin-top: 0.2px;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 50;
}
#primary_nav_wrap ul ul li {
  float: none;
  width: 200px;
  position: relative;
  left: 0px;
}
#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 7.5px 9px;
}
#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}
#primary_nav_wrap ul li:hover > ul {
  display: block
}
/* end of info nav */

/* course div */

#course_div {
  width: 1200px;
  position: relative;
  left: 180px;
  top: 30px;
  padding: 10px;
  display: flex; /* ADD YOUR FLEX DISPLAY PROPERTY HERE */
  flex-flow: wrap;
  
}
#course_img {
  width: 216px;
  height: 121.5px;
  border: 1px solid #ccc;
  border-bottom: none;
}
#course_info {
  border: 1px solid #ccc;
  width: 205.5px;
  padding: 5px;
  position: relative;
  top: -4px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}
a .course_main {
  text-decoration: none;
  color: black;
  width: 204px;
}
.course_main {
  width: 216px;
  display: inline-block;
  margin-right: 30px;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  not supported by any browser */
}
/* end of course div */
＆＃13; 
<!DOCTYPE html>
<html>

<head>
  <title>Hacked Genius</title>
  <link rel='stylesheet' href='main.css'>
  <script src='main.js'></script>
</head>

<body>
  <!-- nav -->
  <div id='nav'>

  </div>
  <!-- end of nav -->

  <!-- info nav -->
  <nav id="primary_nav_wrap">
    <ul>
      <li><a href="#">Development</a>
        <ul>
          <li><a href="#">Web Development</a>
          </li>
          <li><a href="#">Mobile Apps</a>
          </li>
          <li><a href="#">Programming Languages</a>
          </li>
          <li><a href="#">Game Development</a>
          </li>
          <li><a href="#">Databases</a>
          </li>
          <li><a href="#">Software Testing</a>
          </li>
          <li><a href="#">Software Engineering</a>
          </li>
          <li><a href="#">Development Tools</a>
          </li>
          <li><a href="#">E-Commerce</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Business</a>
        <ul>
          <li><a href="#">Finance</a>
          </li>
          <li><a href="#">Entrepreneurship</a>
          </li>
          <li><a href="#">Communications</a>
          </li>
          <li><a href="#">Management</a>
          </li>
          <li><a href="#">Sales</a>
          </li>
          <li><a href="#">Strategy</a>
          </li>
          <li><a href="#">Operations</a>
          </li>
          <li><a href="#">Project Management</a>
          </li>
          <li><a href="#">Business Law</a>
          </li>
          <li><a href="#">Data and Anylytics</a>
          </li>
          <li><a href="#">Home Business</a>
          </li>
          <li><a href="#">Human Resources</a>
          </li>
          <li><a href="#">Industry</a>
          </li>
          <li><a href="#">Media</a>
          </li>
          <li><a href="#">Real Estate</a>
          </li>
          <li><a href="#">Other</a>
          </li>
        </ul>
      </li>
      <li><a href="#">IT & Software</a>
        <ul>
          <li class="dir"><a href="#">IT Certification</a>
          </li>
          <li class="dir"><a href="#">Network & Security</a>
            <li><a href="#">Hardware</a>
            </li>
            <li><a href="#">Operating Systems</a>
            </li>
            <li><a href="#">Other</a>
            </li>
        </ul>
        <li><a href="#">Office Productivity</a>
          <ul>
            <li class="dir"><a href="#">Microsoft</a>
            </li>
            <li class="dir"><a href="#">Apple</a>
              <li><a href="#">Google</a>
              </li>
              <li><a href="#">SAP</a>
              </li>
              <li><a href="#">Intuit</a>
              </li>
              <li><a href="#">Salesforce</a>
              </li>
              <li><a href="#">Oracle</a>
              </li>
              <li><a href="#">Other</a>
              </li>
          </ul>
          <li><a href="#">Personal Development</a>
            <ul>
              <li class="dir"><a href="#">Personal Transformation</a>
              </li>
              <li class="dir"><a href="#">Productivity</a>
                <li><a href="#">Leadership</a>
                </li>
                <li><a href="#">Personal Finance</a>
                </li>
                <li><a href="#">Career Development</a>
                </li>
                <li><a href="#">Parenting & Relationships</a>
                </li>
                <li><a href="#">Happiness</a>
                </li>
                <li><a href="#">Religion & Spirituality</a>
                </li>
                <li><a href="#">Personal Brand Building</a>
                </li>
                <li><a href="#">Creativity</a>
                </li>
                <li><a href="#">Influence</a>
                </li>
                <li><a href="#">Self Esteem</a>
                </li>
                <li><a href="#">Stress Management</a>
                </li>
                <li><a href="#">Memory and Study Skills</a>
                </li>
                <li><a href="#">Motivation</a>
                </li>
                <li><a href="#">Other</a>
                </li>
            </ul>

            <li><a href="#">Design</a>
              <ul>
                <li class="dir"><a href="#">Web Design</a>
                </li>
                <li class="dir"><a href="#">Graphic Design</a>
                  <li><a href="#">Design Tools</a>
                  </li>
                  <li><a href="#">User Experience</a>
                  </li>
                  <li><a href="#">Game Design</a>
                  </li>
                  <li><a href="#">Design Thinking</a>
                  </li>
                  <li><a href="#">3D & Animation</a>
                  </li>
                  <li><a href="#">Fashion</a>
                  </li>
                  <li><a href="#">Architectural Design</a>
                  </li>
                  <li><a href="#">Interior Design</a>
                  </li>
                  <li><a href="#">Other</a>
                  </li>
              </ul>

              <li><a href="#">Marketing</a>
                <ul>
                  <li class="dir"><a href="#">Digital Marketing</a>
                  </li>
                  <li class="dir"><a href="#">Search Engine Optimization</a>
                    <li><a href="#">Social Media Marketing</a>
                    </li>
                    <li><a href="#">Branding</a>
                    </li>
                    <li><a href="#">Marketing Fundamentals</a>
                    </li>
                    <li><a href="#">Analystics & Automation</a>
                    </li>
                    <li><a href="#">Public Relations</a>
                    </li>
                    <li><a href="#">Advertising</a>
                    </li>
                    <li><a href="#">Video & Mobile Marketing</a>
                    </li>
                    <li><a href="#">Content Marketing</a>
                    </li>
                    <li><a href="#">Non-Digital Marketing</a>
                    </li>
                    <li><a href="#">Growth Hacking</a>
                    </li>
                    <li><a href="#">Affiliate Marketing</a>
                    </li>
                    <li><a href="#">Product Marketing</a>
                    </li>
                    <li><a href="#">Other</a>
                    </li>
                </ul>

                <li><a href="#">Lifestyle</a>
                  <ul>
                    <li class="dir"><a href="#">Life Hacks</a>
                    </li>
                    <li class="dir"><a href="#">Arts & Crafts</a>
                    </li>
                    <li class="dir"><a href="#">Food & Beverage</a>
                      <li><a href="#">Beauty & Makeup</a>
                      </li>
                      <li><a href="#">Travel</a>
                      </li>
                      <li><a href="#">Gaming</a>
                      </li>
                      <li><a href="#">Home Improvement</a>
                      </li>
                      <li><a href="#">Pet Care & Training</a>
                      </li>
                  </ul>

                  <li><a href="#">Photography</a>
                    <ul>
                      <li class="dir"><a href="#">Digital Photography</a>
                      </li>
                      <li class="dir"><a href="#">Photography Fundamentals</a>
                      </li>
                      <li class="dir"><a href="#">Portraits</a>
                        <li><a href="#">Landscape</a>
                        </li>
                        <li><a href="#">Black & White</a>
                        </li>
                        <li><a href="#">Photography Tools</a>
                        </li>
                        <li><a href="#">Mobile Photography</a>
                        </li>
                        <li><a href="#">Travel Photography</a>
                        </li>
                        <li><a href="#">Commercial Photography</a>
                        </li>
                        <li><a href="#">Wedding Photography</a>
                        </li>
                        <li><a href="#">Video Design</a>
                        </li>
                        <li><a href="#">Other</a>
                        </li>
                    </ul>

                    <li><a href="#">Health & Fitness</a>
                      <ul>
                        <li class="dir"><a href="#">Fitness</a>
                        </li>
                        <li class="dir"><a href="#">General Health</a>
                        </li>
                        <li class="dir"><a href="#">Sports</a>
                          <li><a href="#">Nutrition</a>
                          </li>
                          <li><a href="#">Yoga</a>
                          </li>
                          <li><a href="#">Mental Health</a>
                          </li>
                          <li><a href="#">Dieting</a>
                          </li>
                          <li><a href="#">Self Defense</a>
                          </li>
                          <li><a href="#">Safety & First Aid</a>
                          </li>
                          <li><a href="#">Dance</a>
                          </li>
                          <li><a href="#">Meditation</a>
                          </li>
                          <li><a href="#">Other</a>
                          </li>
                      </ul>

                      <li><a href="#">Language</a>
                        <ul>
                          <li class="dir"><a href="#">English</a>
                          </li>
                          <li class="dir"><a href="#">Spanish</a>
                          </li>
                          <li class="dir"><a href="#">German</a>
                            <li><a href="#">French</a>
                            </li>
                            <li><a href="#">Japanese</a>
                            </li>
                            <li><a href="#">Portuguese</a>
                            </li>
                            <li><a href="#">Chinese</a>
                            </li>
                            <li><a href="#">Russian</a>
                            </li>
                            <li><a href="#">Latin</a>
                            </li>
                            <li><a href="#">Arabic</a>
                            </li>
                            <li><a href="#">Hebrew</a>
                            </li>
                            <li><a href="#">Italian</a>
                            </li>
                            <li><a href="#">Other</a>
                            </li>
                        </ul>

                        <li><a href="#">Music</a>
                          <ul>
                            <li class="dir"><a href="#">Instruments</a>
                            </li>
                            <li class="dir"><a href="#">Production</a>
                            </li>
                            <li class="dir"><a href="#">Music Fundamentals</a>
                              <li><a href="#">Vocal</a>
                              </li>
                              <li><a href="#">Music Techniques</a>
                              </li>
                              <li><a href="#">Music Software</a>
                              </li>
                              <li><a href="#">Other</a>
                              </li>
                          </ul>

                          <li><a href="#">Academics</a>
                            <ul>
                              <li class="dir"><a href="#">Social Science</a>
                              </li>
                              <li class="dir"><a href="#">Math & Science</a>
                              </li>
                              <li class="dir"><a href="#">Humanities</a>
                            </ul>


    </ul>
  </nav>
  <!-- end of info nav -->

  <div id='course_div'>

    <a href='#'>
      <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

        <div id='course_info'>
          Excel Excel Excel Excel Excel Excel
        </div>
      </div>
    </a>

    <a href='#'>
      <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

        <div id='course_info'>
          Hi
        </div>
      </div>
    </a>

    <a href='#'>
      <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

        <div id='course_info'>
          Hi
        </div>
      </div>
    </a>

    <a href='#'>
      <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

        <div id='course_info'>
          Hi
        </div>
      </div>
    </a>

    <a href='#'>
      <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

        <div id='course_info'>
          Hi
        </div>
      </div>
    </a>

    <a href='#'>
      <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

        <div id='course_info'>
          Hi
        </div>
      </div>
    </a>

    <a href='#'>
      <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

        <div id='course_info'>
          Hi
        </div>
      </div>
    </a>

    <a href='#'>
      <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

        <div id='course_info'>
          Hi
        </div>
      </div>
    </a>

    <a href='#'>
      <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

        <div id='course_info'>
          Hi
        </div>
      </div>
    </a>

    <a href='#'>
      <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

        <div id='course_info'>
          Hi
        </div>
      </div>
    </a>

    <a href='#'>
      <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

        <div id='course_info'>
          Hi
        </div>
      </div>
    </a>

    <a href='#'>
      <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

        <div id='course_info'>
          Hi
        </div>
      </div>
    </a>

    <a href='#'>
      <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

        <div id='course_info'>
          Hi
        </div>
      </div>
    </a>

    <a href='#'>
      <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

        <div id='course_info'>
          Hi
        </div>
      </div>
    </a>


  </div>

</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

另一种选择是将float: left;添加到#course_div中的锚标记，然后使用nth-child()将第5个锚元素后的每个锚元素作为目标，以清除其前面的浮动元素。

#course_div a {
  float: left;
}
#course_div a:nth-child(5n+6) {
   clear: left;
}

SIDE注意： #course_info正在重复使用，应该是CSS类.course_info。

/* font */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */

/* clear settings */
body {
  padding: 0;
  margin: 0;
  background: white;
}
/* end of clear settings */

/* nav */
  #nav {
    width: 1600px;
    height: 50px;
    background: #009ACD;
  }
/* end of nav */

/* info nav */
  #primary_nav_wrap
{
    width: 1600px;
  height: 50px;
  background: #1F1F1F;
}

#primary_nav_wrap ul
{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0;
    left: 3%;
    top: 5px;
}

#primary_nav_wrap ul a
{
    display:block;
    text-decoration:none;
    font-size:15px;
    padding: 10px 15px 10px 15px;
    font-family: 'Open Sans', sans-serif;
    color: white;
}

#primary_nav_wrap ul a:hover {
  background: white;
}

#primary_nav_wrap ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0;
}

#primary_nav_wrap ul li:hover a {
  color: black;
  background: white;
}

#primary_nav_wrap ul li a:hover {
  background: white;
}

#primary_nav_wrap ul ul li a:hover {
  background: #F4F4F4;
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0;
    margin-top: 0.2px;
    border: 1px solid #ccc;
    border-top: none;
    z-index: 50;
}

#primary_nav_wrap ul ul li
{
    float:none;
    width:200px;
    position: relative;
    left: 0px;
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:7.5px 9px;
}

#primary_nav_wrap ul ul ul
{
    top:0;
    left:100%
}

#primary_nav_wrap ul li:hover > ul
{
    display:block
}
/* end of info nav */

/* course div */
  #course_div {
    width: 1200px;
    position: relative;
    left: 180px;
    top: 30px;
    padding: 10px;
  }

  #course_img {
    width: 216px;
    height: 121.5px;
    border: 1px solid #ccc;
    border-bottom: none;
  }

  #course_info {
    border: 1px solid #ccc;
    width: 205.5px;
    padding: 5px;
    position: relative;
    top: -4px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
  }
  
  a .course_main {
     text-decoration: none;
    color: black;
    width: 204px;
  }

  .course_main {
    width: 216px;
    display: inline-block;
    margin-right: 30px;
     -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
  }

#course_div a {
  float: left;
}
#course_div a:nth-child(5n+6) {
   clear: left;
}
/* end of course div */
<!DOCTYPE html>
<html>
  <head>
    <title> Hacked Genius </title>
    <link rel='stylesheet' href='main.css'>
    <script src='main.js'></script>
  </head>

  <body>
    <!-- nav -->
      <div id='nav'>

      </div>
    <!-- end of nav -->

    <!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
  <li><a href="#">Development</a>
    <ul>
      <li><a href="#">Web Development</a></li>
      <li><a href="#">Mobile Apps</a></li>
      <li><a href="#">Programming Languages</a></li>
      <li><a href="#">Game Development</a></li>
      <li><a href="#">Databases</a></li>
      <li><a href="#">Software Testing</a></li>
      <li><a href="#">Software Engineering</a></li>
      <li><a href="#">Development Tools</a></li>
      <li><a href="#">E-Commerce</a></li>
    </ul>
  </li>
  <li><a href="#">Business</a>
    <ul>
      <li><a href="#">Finance</a></li>
      <li><a href="#">Entrepreneurship</a></li>
      <li><a href="#">Communications</a></li>
      <li><a href="#">Management</a></li>
      <li><a href="#">Sales</a></li>
      <li><a href="#">Strategy</a></li>
      <li><a href="#">Operations</a></li>
      <li><a href="#">Project Management</a></li>
      <li><a href="#">Business Law</a></li>
      <li><a href="#">Data and Anylytics</a></li>
      <li><a href="#">Home Business</a></li>
      <li><a href="#">Human Resources</a></li>
      <li><a href="#">Industry</a></li>
      <li><a href="#">Media</a></li>
      <li><a href="#">Real Estate</a></li>
      <li><a href="#">Other</a></li>
    </ul>
  </li>
  <li><a href="#">IT & Software</a>
    <ul>
      <li class="dir"><a href="#">IT Certification</a></li>
      <li class="dir"><a href="#">Network & Security</a>
      <li><a href="#">Hardware</a></li>
      <li><a href="#">Operating Systems</a></li>
      <li><a href="#">Other</a></li>
</ul>
<li><a href="#">Office Productivity</a>
    <ul>
      <li class="dir"><a href="#">Microsoft</a></li>
      <li class="dir"><a href="#">Apple</a>
      <li><a href="#">Google</a></li>
      <li><a href="#">SAP</a></li>
      <li><a href="#">Intuit</a></li>
      <li><a href="#">Salesforce</a></li>
      <li><a href="#">Oracle</a></li>
      <li><a href="#">Other</a></li>
</ul>
<li><a href="#">Personal Development</a>
    <ul>
      <li class="dir"><a href="#">Personal Transformation</a></li>
      <li class="dir"><a href="#">Productivity</a>
      <li><a href="#">Leadership</a></li>
      <li><a href="#">Personal Finance</a></li>
      <li><a href="#">Career Development</a></li>
      <li><a href="#">Parenting & Relationships</a></li>
      <li><a href="#">Happiness</a></li>
      <li><a href="#">Religion & Spirituality</a></li>
      <li><a href="#">Personal Brand Building</a></li>
      <li><a href="#">Creativity</a></li>
      <li><a href="#">Influence</a></li>
      <li><a href="#">Self Esteem</a></li>
      <li><a href="#">Stress Management</a></li>
      <li><a href="#">Memory and Study Skills</a></li>
      <li><a href="#">Motivation</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Design</a>
    <ul>
      <li class="dir"><a href="#">Web Design</a></li>
      <li class="dir"><a href="#">Graphic Design</a>
      <li><a href="#">Design Tools</a></li>
      <li><a href="#">User Experience</a></li>
      <li><a href="#">Game Design</a></li>
      <li><a href="#">Design Thinking</a></li>
      <li><a href="#">3D & Animation</a></li>
      <li><a href="#">Fashion</a></li>
      <li><a href="#">Architectural Design</a></li>
      <li><a href="#">Interior Design</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Marketing</a>
    <ul>
      <li class="dir"><a href="#">Digital Marketing</a></li>
      <li class="dir"><a href="#">Search Engine Optimization</a>
      <li><a href="#">Social Media Marketing</a></li>
      <li><a href="#">Branding</a></li>
      <li><a href="#">Marketing Fundamentals</a></li>
      <li><a href="#">Analystics & Automation</a></li>
      <li><a href="#">Public Relations</a></li>
      <li><a href="#">Advertising</a></li>
      <li><a href="#">Video & Mobile Marketing</a></li>
      <li><a href="#">Content Marketing</a></li>
      <li><a href="#">Non-Digital Marketing</a></li>
      <li><a href="#">Growth Hacking</a></li>
      <li><a href="#">Affiliate Marketing</a></li>
      <li><a href="#">Product Marketing</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Lifestyle</a>
    <ul>
      <li class="dir"><a href="#">Life Hacks</a></li>
      <li class="dir"><a href="#">Arts & Crafts</a></li>
      <li class="dir"><a href="#">Food & Beverage</a>
      <li><a href="#">Beauty & Makeup</a></li>
      <li><a href="#">Travel</a></li>
      <li><a href="#">Gaming</a></li>
      <li><a href="#">Home Improvement</a></li>
      <li><a href="#">Pet Care & Training</a></li>
</ul>

<li><a href="#">Photography</a>
    <ul>
      <li class="dir"><a href="#">Digital Photography</a></li>
      <li class="dir"><a href="#">Photography Fundamentals</a></li>
      <li class="dir"><a href="#">Portraits</a>
      <li><a href="#">Landscape</a></li>
      <li><a href="#">Black & White</a></li>
      <li><a href="#">Photography Tools</a></li>
      <li><a href="#">Mobile Photography</a></li>
      <li><a href="#">Travel Photography</a></li>
      <li><a href="#">Commercial Photography</a></li>
      <li><a href="#">Wedding Photography</a></li>
      <li><a href="#">Video Design</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Health & Fitness</a>
    <ul>
      <li class="dir"><a href="#">Fitness</a></li>
      <li class="dir"><a href="#">General Health</a></li>
      <li class="dir"><a href="#">Sports</a>
      <li><a href="#">Nutrition</a></li>
      <li><a href="#">Yoga</a></li>
      <li><a href="#">Mental Health</a></li>
      <li><a href="#">Dieting</a></li>
      <li><a href="#">Self Defense</a></li>
      <li><a href="#">Safety & First Aid</a></li>
      <li><a href="#">Dance</a></li>
      <li><a href="#">Meditation</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Language</a>
    <ul>
      <li class="dir"><a href="#">English</a></li>
      <li class="dir"><a href="#">Spanish</a></li>
      <li class="dir"><a href="#">German</a>
      <li><a href="#">French</a></li>
      <li><a href="#">Japanese</a></li>
      <li><a href="#">Portuguese</a></li>
      <li><a href="#">Chinese</a></li>
      <li><a href="#">Russian</a></li>
      <li><a href="#">Latin</a></li>
      <li><a href="#">Arabic</a></li>
      <li><a href="#">Hebrew</a></li>
      <li><a href="#">Italian</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Music</a>
    <ul>
      <li class="dir"><a href="#">Instruments</a></li>
      <li class="dir"><a href="#">Production</a></li>
      <li class="dir"><a href="#">Music Fundamentals</a>
      <li><a href="#">Vocal</a></li>
      <li><a href="#">Music Techniques</a></li>
      <li><a href="#">Music Software</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Academics</a>
    <ul>
      <li class="dir"><a href="#">Social Science</a></li>
      <li class="dir"><a href="#">Math & Science</a></li>
      <li class="dir"><a href="#">Humanities</a>
</ul>


</ul>
</nav>
    <!-- end of info nav -->

    <div id='course_div'>

   <a href='#'> <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

         <div id='course_info'>
          Excel Excel Excel Excel Excel Excel
          </div> </div></a>

         <a href='#'> <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

         <div id='course_info'>
          Hi
          </div> </div></a>

         <a href='#'> <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

         <div id='course_info'>
          Hi
          </div> </div></a>

         <a href='#'> <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

         <div id='course_info'>
          Hi
          </div> </div></a>

         <a href='#'> <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

         <div id='course_info'>
          Hi
          </div> </div></a>

         <a href='#'> <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

         <div id='course_info'>
          Hi
          </div> </div></a>

         <a href='#'> <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

         <div id='course_info'>
          Hi
          </div> </div></a>

         <a href='#'> <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

         <div id='course_info'>
          Excel Excel Excel Excel Excel Excel
          </div> </div></a>

         <a href='#'> <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

         <div id='course_info'>
          Hi
          </div> </div></a>

         <a href='#'> <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

         <div id='course_info'>
          Hi
          </div> </div></a>

         <a href='#'> <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

         <div id='course_info'>
          Hi
          </div> </div></a>

         <a href='#'> <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

         <div id='course_info'>
          Hi
          </div> </div></a>

         <a href='#'> <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

         <div id='course_info'>
          Hi
          </div> </div></a>

         <a href='#'> <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

         <div id='course_info'>
          Hi
          </div> </div></a>

         <a href='#'> <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

         <div id='course_info'>
          Hi
          </div> </div></a>


    </div>

  </body>
</html>

答案 2 :(得分：0)

将vertical-align:top;添加到.course_main班级：

/* font */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

/* end of font */

/* clear settings */

body {
  padding: 0;
  margin: 0;
  background: white;
}
/* end of clear settings */

/* nav */

#nav {
  width: 1600px;
  height: 50px;
  background: #009ACD;
}
/* end of nav */

/* info nav */

#primary_nav_wrap {
  width: 1600px;
  height: 50px;
  background: #1F1F1F;
}
#primary_nav_wrap ul {
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  left: 3%;
  top: 5px;
}
#primary_nav_wrap ul a {
  display: block;
  text-decoration: none;
  font-size: 15px;
  padding: 10px 15px 10px 15px;
  font-family: 'Open Sans', sans-serif;
  color: white;
}
#primary_nav_wrap ul a:hover {
  background: white;
}
#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}
#primary_nav_wrap ul li:hover a {
  color: black;
  background: white;
}
#primary_nav_wrap ul li a:hover {
  background: white;
}
#primary_nav_wrap ul ul li a:hover {
  background: #F4F4F4;
}
#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 0;
  margin-top: 0.2px;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 50;
}
#primary_nav_wrap ul ul li {
  float: none;
  width: 200px;
  position: relative;
  left: 0px;
}
#primary_nav_wrap ul ul a {
  line-height: 120%;
  padding: 7.5px 9px;
}
#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%
}
#primary_nav_wrap ul li:hover > ul {
  display: block
}
/* end of info nav */

/* course div */

#course_div {
  width: 1200px;
  position: relative;
  left: 180px;
  top: 30px;
  padding: 10px;
}
#course_img {
  width: 216px;
  height: 121.5px;
  border: 1px solid #ccc;
  border-bottom: none;
}
#course_info {
  border: 1px solid #ccc;
  width: 205.5px;
  padding: 5px;
  position: relative;
  top: -4px;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}
a .course_main {
  text-decoration: none;
  color: black;
  width: 204px;
}
.course_main {
  vertical-align:top;
  width: 216px;
  display: inline-block;
  margin-right: 30px;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -khtml-user-select: none;
  /* Konqueror */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  not supported by any browser */
}
/* end of course div */
<!DOCTYPE html>
<html>

<head>
  <title>Hacked Genius</title>
  <link rel='stylesheet' href='main.css'>
  <script src='main.js'></script>
</head>

<body>
  <!-- nav -->
  <div id='nav'>

  </div>
  <!-- end of nav -->

  <!-- info nav -->
  <nav id="primary_nav_wrap">
    <ul>
      <li><a href="#">Development</a>
        <ul>
          <li><a href="#">Web Development</a>
          </li>
          <li><a href="#">Mobile Apps</a>
          </li>
          <li><a href="#">Programming Languages</a>
          </li>
          <li><a href="#">Game Development</a>
          </li>
          <li><a href="#">Databases</a>
          </li>
          <li><a href="#">Software Testing</a>
          </li>
          <li><a href="#">Software Engineering</a>
          </li>
          <li><a href="#">Development Tools</a>
          </li>
          <li><a href="#">E-Commerce</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Business</a>
        <ul>
          <li><a href="#">Finance</a>
          </li>
          <li><a href="#">Entrepreneurship</a>
          </li>
          <li><a href="#">Communications</a>
          </li>
          <li><a href="#">Management</a>
          </li>
          <li><a href="#">Sales</a>
          </li>
          <li><a href="#">Strategy</a>
          </li>
          <li><a href="#">Operations</a>
          </li>
          <li><a href="#">Project Management</a>
          </li>
          <li><a href="#">Business Law</a>
          </li>
          <li><a href="#">Data and Anylytics</a>
          </li>
          <li><a href="#">Home Business</a>
          </li>
          <li><a href="#">Human Resources</a>
          </li>
          <li><a href="#">Industry</a>
          </li>
          <li><a href="#">Media</a>
          </li>
          <li><a href="#">Real Estate</a>
          </li>
          <li><a href="#">Other</a>
          </li>
        </ul>
      </li>
      <li><a href="#">IT & Software</a>
        <ul>
          <li class="dir"><a href="#">IT Certification</a>
          </li>
          <li class="dir"><a href="#">Network & Security</a>
            <li><a href="#">Hardware</a>
            </li>
            <li><a href="#">Operating Systems</a>
            </li>
            <li><a href="#">Other</a>
            </li>
        </ul>
        <li><a href="#">Office Productivity</a>
          <ul>
            <li class="dir"><a href="#">Microsoft</a>
            </li>
            <li class="dir"><a href="#">Apple</a>
              <li><a href="#">Google</a>
              </li>
              <li><a href="#">SAP</a>
              </li>
              <li><a href="#">Intuit</a>
              </li>
              <li><a href="#">Salesforce</a>
              </li>
              <li><a href="#">Oracle</a>
              </li>
              <li><a href="#">Other</a>
              </li>
          </ul>
          <li><a href="#">Personal Development</a>
            <ul>
              <li class="dir"><a href="#">Personal Transformation</a>
              </li>
              <li class="dir"><a href="#">Productivity</a>
                <li><a href="#">Leadership</a>
                </li>
                <li><a href="#">Personal Finance</a>
                </li>
                <li><a href="#">Career Development</a>
                </li>
                <li><a href="#">Parenting & Relationships</a>
                </li>
                <li><a href="#">Happiness</a>
                </li>
                <li><a href="#">Religion & Spirituality</a>
                </li>
                <li><a href="#">Personal Brand Building</a>
                </li>
                <li><a href="#">Creativity</a>
                </li>
                <li><a href="#">Influence</a>
                </li>
                <li><a href="#">Self Esteem</a>
                </li>
                <li><a href="#">Stress Management</a>
                </li>
                <li><a href="#">Memory and Study Skills</a>
                </li>
                <li><a href="#">Motivation</a>
                </li>
                <li><a href="#">Other</a>
                </li>
            </ul>

            <li><a href="#">Design</a>
              <ul>
                <li class="dir"><a href="#">Web Design</a>
                </li>
                <li class="dir"><a href="#">Graphic Design</a>
                  <li><a href="#">Design Tools</a>
                  </li>
                  <li><a href="#">User Experience</a>
                  </li>
                  <li><a href="#">Game Design</a>
                  </li>
                  <li><a href="#">Design Thinking</a>
                  </li>
                  <li><a href="#">3D & Animation</a>
                  </li>
                  <li><a href="#">Fashion</a>
                  </li>
                  <li><a href="#">Architectural Design</a>
                  </li>
                  <li><a href="#">Interior Design</a>
                  </li>
                  <li><a href="#">Other</a>
                  </li>
              </ul>

              <li><a href="#">Marketing</a>
                <ul>
                  <li class="dir"><a href="#">Digital Marketing</a>
                  </li>
                  <li class="dir"><a href="#">Search Engine Optimization</a>
                    <li><a href="#">Social Media Marketing</a>
                    </li>
                    <li><a href="#">Branding</a>
                    </li>
                    <li><a href="#">Marketing Fundamentals</a>
                    </li>
                    <li><a href="#">Analystics & Automation</a>
                    </li>
                    <li><a href="#">Public Relations</a>
                    </li>
                    <li><a href="#">Advertising</a>
                    </li>
                    <li><a href="#">Video & Mobile Marketing</a>
                    </li>
                    <li><a href="#">Content Marketing</a>
                    </li>
                    <li><a href="#">Non-Digital Marketing</a>
                    </li>
                    <li><a href="#">Growth Hacking</a>
                    </li>
                    <li><a href="#">Affiliate Marketing</a>
                    </li>
                    <li><a href="#">Product Marketing</a>
                    </li>
                    <li><a href="#">Other</a>
                    </li>
                </ul>

                <li><a href="#">Lifestyle</a>
                  <ul>
                    <li class="dir"><a href="#">Life Hacks</a>
                    </li>
                    <li class="dir"><a href="#">Arts & Crafts</a>
                    </li>
                    <li class="dir"><a href="#">Food & Beverage</a>
                      <li><a href="#">Beauty & Makeup</a>
                      </li>
                      <li><a href="#">Travel</a>
                      </li>
                      <li><a href="#">Gaming</a>
                      </li>
                      <li><a href="#">Home Improvement</a>
                      </li>
                      <li><a href="#">Pet Care & Training</a>
                      </li>
                  </ul>

                  <li><a href="#">Photography</a>
                    <ul>
                      <li class="dir"><a href="#">Digital Photography</a>
                      </li>
                      <li class="dir"><a href="#">Photography Fundamentals</a>
                      </li>
                      <li class="dir"><a href="#">Portraits</a>
                        <li><a href="#">Landscape</a>
                        </li>
                        <li><a href="#">Black & White</a>
                        </li>
                        <li><a href="#">Photography Tools</a>
                        </li>
                        <li><a href="#">Mobile Photography</a>
                        </li>
                        <li><a href="#">Travel Photography</a>
                        </li>
                        <li><a href="#">Commercial Photography</a>
                        </li>
                        <li><a href="#">Wedding Photography</a>
                        </li>
                        <li><a href="#">Video Design</a>
                        </li>
                        <li><a href="#">Other</a>
                        </li>
                    </ul>

                    <li><a href="#">Health & Fitness</a>
                      <ul>
                        <li class="dir"><a href="#">Fitness</a>
                        </li>
                        <li class="dir"><a href="#">General Health</a>
                        </li>
                        <li class="dir"><a href="#">Sports</a>
                          <li><a href="#">Nutrition</a>
                          </li>
                          <li><a href="#">Yoga</a>
                          </li>
                          <li><a href="#">Mental Health</a>
                          </li>
                          <li><a href="#">Dieting</a>
                          </li>
                          <li><a href="#">Self Defense</a>
                          </li>
                          <li><a href="#">Safety & First Aid</a>
                          </li>
                          <li><a href="#">Dance</a>
                          </li>
                          <li><a href="#">Meditation</a>
                          </li>
                          <li><a href="#">Other</a>
                          </li>
                      </ul>

                      <li><a href="#">Language</a>
                        <ul>
                          <li class="dir"><a href="#">English</a>
                          </li>
                          <li class="dir"><a href="#">Spanish</a>
                          </li>
                          <li class="dir"><a href="#">German</a>
                            <li><a href="#">French</a>
                            </li>
                            <li><a href="#">Japanese</a>
                            </li>
                            <li><a href="#">Portuguese</a>
                            </li>
                            <li><a href="#">Chinese</a>
                            </li>
                            <li><a href="#">Russian</a>
                            </li>
                            <li><a href="#">Latin</a>
                            </li>
                            <li><a href="#">Arabic</a>
                            </li>
                            <li><a href="#">Hebrew</a>
                            </li>
                            <li><a href="#">Italian</a>
                            </li>
                            <li><a href="#">Other</a>
                            </li>
                        </ul>

                        <li><a href="#">Music</a>
                          <ul>
                            <li class="dir"><a href="#">Instruments</a>
                            </li>
                            <li class="dir"><a href="#">Production</a>
                            </li>
                            <li class="dir"><a href="#">Music Fundamentals</a>
                              <li><a href="#">Vocal</a>
                              </li>
                              <li><a href="#">Music Techniques</a>
                              </li>
                              <li><a href="#">Music Software</a>
                              </li>
                              <li><a href="#">Other</a>
                              </li>
                          </ul>

                          <li><a href="#">Academics</a>
                            <ul>
                              <li class="dir"><a href="#">Social Science</a>
                              </li>
                              <li class="dir"><a href="#">Math & Science</a>
                              </li>
                              <li class="dir"><a href="#">Humanities</a>
                            </ul>


    </ul>
  </nav>
  <!-- end of info nav -->

  <div id='course_div'>

    <a href='#'>
      <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

        <div id='course_info'>
          Excel Excel Excel Excel Excel Excel
        </div>
      </div>
    </a>

    <a href='#'>
      <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

        <div id='course_info'>
          Hi
        </div>
      </div>
    </a>


  </div>

</body>

</html>

答案 3 :(得分：0)

jQuery解决方案可以是jQuery.equalHeights：

https://github.com/mattbanks/jQuery.equalHeights

它将计算选择器的高度，并为选择器中的所有元素设置相同的高度。

e.g。

<div class="test">
    This is one line of text.
</div>

<div class="test">
    This is three lines of text.<br>
    This is three lines of text.<br>
    This is three lines of text.<br>
</div>
<style type="text/css">
    .test{border: solid 1px #f00};
</style>
<script>
   $(document).ready(function(){
       $('.test').equalHeights();
   });
</script>

另一种解决方案可以是使用flexbox，例如：http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback

答案 4 :(得分：0)

尝试将CS​​S中的display: inline-block div中的display: inline-table更改为.course_main 

/* font */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
/* end of font */

/* clear settings */
body {
  padding: 0;
  margin: 0;
  background: white;
}
/* end of clear settings */

/* nav */
  #nav {
    width: 1600px;
    height: 50px;
    background: #009ACD;
  }
/* end of nav */

/* info nav */
  #primary_nav_wrap
{
    width: 1600px;
  height: 50px;
  background: #1F1F1F;
}

#primary_nav_wrap ul
{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0;
    left: 3%;
    top: 5px;
}

#primary_nav_wrap ul a
{
    display:block;
    text-decoration:none;
    font-size:15px;
    padding: 10px 15px 10px 15px;
    font-family: 'Open Sans', sans-serif;
    color: white;
}

#primary_nav_wrap ul a:hover {
  background: white;
}

#primary_nav_wrap ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0;
}

#primary_nav_wrap ul li:hover a {
  color: black;
  background: white;
}

#primary_nav_wrap ul li a:hover {
  background: white;
}

#primary_nav_wrap ul ul li a:hover {
  background: #F4F4F4;
}

#primary_nav_wrap ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0;
    margin-top: 0.2px;
    border: 1px solid #ccc;
    border-top: none;
    z-index: 50;
}

#primary_nav_wrap ul ul li
{
    float:none;
    width:200px;
    position: relative;
    left: 0px;
}

#primary_nav_wrap ul ul a
{
    line-height:120%;
    padding:7.5px 9px;
}

#primary_nav_wrap ul ul ul
{
    top:0;
    left:100%
}

#primary_nav_wrap ul li:hover > ul
{
    display:block
}
/* end of info nav */

/* course div */
  #course_div {
    width: 1200px;
    position: relative;
    left: 180px;
    top: 30px;
    padding: 10px;
  }

  #course_img {
    width: 216px;
    height: 121.5px;
    border: 1px solid #ccc;
    border-bottom: none;
  }

  #course_info {
    border: 1px solid #ccc;
    width: 205.5px;
    padding: 5px;
    position: relative;
    top: -4px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
  }
  
  a .course_main {
     text-decoration: none;
    color: black;
    width: 204px;
  }

  .course_main {
    width: 216px;
    display: inline-table;
    margin-right: 30px;
     -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
  }

/* end of course div */
<!DOCTYPE html>
<html>
  <head>
    <title> Hacked Genius </title>
    <link rel='stylesheet' href='main.css'>
    <script src='main.js'></script>
  </head>

  <body>
    <!-- nav -->
      <div id='nav'>

      </div>
    <!-- end of nav -->

    <!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
  <li><a href="#">Development</a>
    <ul>
      <li><a href="#">Web Development</a></li>
      <li><a href="#">Mobile Apps</a></li>
      <li><a href="#">Programming Languages</a></li>
      <li><a href="#">Game Development</a></li>
      <li><a href="#">Databases</a></li>
      <li><a href="#">Software Testing</a></li>
      <li><a href="#">Software Engineering</a></li>
      <li><a href="#">Development Tools</a></li>
      <li><a href="#">E-Commerce</a></li>
    </ul>
  </li>
  <li><a href="#">Business</a>
    <ul>
      <li><a href="#">Finance</a></li>
      <li><a href="#">Entrepreneurship</a></li>
      <li><a href="#">Communications</a></li>
      <li><a href="#">Management</a></li>
      <li><a href="#">Sales</a></li>
      <li><a href="#">Strategy</a></li>
      <li><a href="#">Operations</a></li>
      <li><a href="#">Project Management</a></li>
      <li><a href="#">Business Law</a></li>
      <li><a href="#">Data and Anylytics</a></li>
      <li><a href="#">Home Business</a></li>
      <li><a href="#">Human Resources</a></li>
      <li><a href="#">Industry</a></li>
      <li><a href="#">Media</a></li>
      <li><a href="#">Real Estate</a></li>
      <li><a href="#">Other</a></li>
    </ul>
  </li>
  <li><a href="#">IT & Software</a>
    <ul>
      <li class="dir"><a href="#">IT Certification</a></li>
      <li class="dir"><a href="#">Network & Security</a>
      <li><a href="#">Hardware</a></li>
      <li><a href="#">Operating Systems</a></li>
      <li><a href="#">Other</a></li>
</ul>
<li><a href="#">Office Productivity</a>
    <ul>
      <li class="dir"><a href="#">Microsoft</a></li>
      <li class="dir"><a href="#">Apple</a>
      <li><a href="#">Google</a></li>
      <li><a href="#">SAP</a></li>
      <li><a href="#">Intuit</a></li>
      <li><a href="#">Salesforce</a></li>
      <li><a href="#">Oracle</a></li>
      <li><a href="#">Other</a></li>
</ul>
<li><a href="#">Personal Development</a>
    <ul>
      <li class="dir"><a href="#">Personal Transformation</a></li>
      <li class="dir"><a href="#">Productivity</a>
      <li><a href="#">Leadership</a></li>
      <li><a href="#">Personal Finance</a></li>
      <li><a href="#">Career Development</a></li>
      <li><a href="#">Parenting & Relationships</a></li>
      <li><a href="#">Happiness</a></li>
      <li><a href="#">Religion & Spirituality</a></li>
      <li><a href="#">Personal Brand Building</a></li>
      <li><a href="#">Creativity</a></li>
      <li><a href="#">Influence</a></li>
      <li><a href="#">Self Esteem</a></li>
      <li><a href="#">Stress Management</a></li>
      <li><a href="#">Memory and Study Skills</a></li>
      <li><a href="#">Motivation</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Design</a>
    <ul>
      <li class="dir"><a href="#">Web Design</a></li>
      <li class="dir"><a href="#">Graphic Design</a>
      <li><a href="#">Design Tools</a></li>
      <li><a href="#">User Experience</a></li>
      <li><a href="#">Game Design</a></li>
      <li><a href="#">Design Thinking</a></li>
      <li><a href="#">3D & Animation</a></li>
      <li><a href="#">Fashion</a></li>
      <li><a href="#">Architectural Design</a></li>
      <li><a href="#">Interior Design</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Marketing</a>
    <ul>
      <li class="dir"><a href="#">Digital Marketing</a></li>
      <li class="dir"><a href="#">Search Engine Optimization</a>
      <li><a href="#">Social Media Marketing</a></li>
      <li><a href="#">Branding</a></li>
      <li><a href="#">Marketing Fundamentals</a></li>
      <li><a href="#">Analystics & Automation</a></li>
      <li><a href="#">Public Relations</a></li>
      <li><a href="#">Advertising</a></li>
      <li><a href="#">Video & Mobile Marketing</a></li>
      <li><a href="#">Content Marketing</a></li>
      <li><a href="#">Non-Digital Marketing</a></li>
      <li><a href="#">Growth Hacking</a></li>
      <li><a href="#">Affiliate Marketing</a></li>
      <li><a href="#">Product Marketing</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Lifestyle</a>
    <ul>
      <li class="dir"><a href="#">Life Hacks</a></li>
      <li class="dir"><a href="#">Arts & Crafts</a></li>
      <li class="dir"><a href="#">Food & Beverage</a>
      <li><a href="#">Beauty & Makeup</a></li>
      <li><a href="#">Travel</a></li>
      <li><a href="#">Gaming</a></li>
      <li><a href="#">Home Improvement</a></li>
      <li><a href="#">Pet Care & Training</a></li>
</ul>

<li><a href="#">Photography</a>
    <ul>
      <li class="dir"><a href="#">Digital Photography</a></li>
      <li class="dir"><a href="#">Photography Fundamentals</a></li>
      <li class="dir"><a href="#">Portraits</a>
      <li><a href="#">Landscape</a></li>
      <li><a href="#">Black & White</a></li>
      <li><a href="#">Photography Tools</a></li>
      <li><a href="#">Mobile Photography</a></li>
      <li><a href="#">Travel Photography</a></li>
      <li><a href="#">Commercial Photography</a></li>
      <li><a href="#">Wedding Photography</a></li>
      <li><a href="#">Video Design</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Health & Fitness</a>
    <ul>
      <li class="dir"><a href="#">Fitness</a></li>
      <li class="dir"><a href="#">General Health</a></li>
      <li class="dir"><a href="#">Sports</a>
      <li><a href="#">Nutrition</a></li>
      <li><a href="#">Yoga</a></li>
      <li><a href="#">Mental Health</a></li>
      <li><a href="#">Dieting</a></li>
      <li><a href="#">Self Defense</a></li>
      <li><a href="#">Safety & First Aid</a></li>
      <li><a href="#">Dance</a></li>
      <li><a href="#">Meditation</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Language</a>
    <ul>
      <li class="dir"><a href="#">English</a></li>
      <li class="dir"><a href="#">Spanish</a></li>
      <li class="dir"><a href="#">German</a>
      <li><a href="#">French</a></li>
      <li><a href="#">Japanese</a></li>
      <li><a href="#">Portuguese</a></li>
      <li><a href="#">Chinese</a></li>
      <li><a href="#">Russian</a></li>
      <li><a href="#">Latin</a></li>
      <li><a href="#">Arabic</a></li>
      <li><a href="#">Hebrew</a></li>
      <li><a href="#">Italian</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Music</a>
    <ul>
      <li class="dir"><a href="#">Instruments</a></li>
      <li class="dir"><a href="#">Production</a></li>
      <li class="dir"><a href="#">Music Fundamentals</a>
      <li><a href="#">Vocal</a></li>
      <li><a href="#">Music Techniques</a></li>
      <li><a href="#">Music Software</a></li>
      <li><a href="#">Other</a></li>
</ul>

<li><a href="#">Academics</a>
    <ul>
      <li class="dir"><a href="#">Social Science</a></li>
      <li class="dir"><a href="#">Math & Science</a></li>
      <li class="dir"><a href="#">Humanities</a>
</ul>


</ul>
</nav>
    <!-- end of info nav -->

    <div id='course_div'>

   <a href='#'> <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

         <div id='course_info'>
          Excel Excel Excel Excel Excel Excel
          </div> </div></a>

         <a href='#'> <div class='course_main'>
        <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'>

         <div id='course_info'>
          Hi
          </div> </div></a>


    </div>

  </body>
</html>

相关问题
最新问题