为什么我的列换行到框架中的下一行

Question

我有两个div应该在一行上。 一个div是线宽度的1/3，第二个div是2/3宽度。 第二个较大的div不是漂浮在与较小的div在同一行上。

.home {
  border: 4px solid gray;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0), rgba(0, 0, 0, .3)), url('https://unsplash.it/1024/768');
  background-size: cover;
  background-repeat: none;
  background-position: center center;
}
.top {
  background: black;
}
.bottom {
  background: blue;
}
.left-nav {
  border: 1px solid gray;
}
.right-content {
  border: 1px dashed purple;
  height: 100px;
}

<!--Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section class="home">
  <!--Middle Row-->
  <div class="row">
    <!--Top Row-->
    <div class="twelve columns top u-full-width">
      <h4 class="heading"><span class="demphasize">Teacher Application Submission for </span>Dwayne Neckles</h4>
    </div>
    <!--Navigation-->
    <div class="left-nav one-third column">
      <nav>
        <ul>
          <li><a href="index.html">Home</a>
          </li>
          <li><a href="biography.html">Biography</a>
          </li>
          <li><a href="community.html">Community</a>
          </li>
          <li><a href="leadership.html">Leadership</a>
          </li>
        </ul>
      </nav>
    </div>
    <div class="right-content two-thirds column">
    </div>
    <!--Footer Row-->
    <div class="twelve columns u-full-width">
      <h6 class="byline demphasize">Developed For</h6>
      <img src="https://unsplash.it/204/52" width="204" height="52" alt="logo">
    </div>
  </div>
</section>

Answer 1

您需要将

行包装在<div class="row">...</div>

.home {
border: 4px solid gray;   
background-image: radial-gradient(
      circle,
      rgba(0,0,0,0),
      rgba(0,0,0,.3)
    ),url('https://unsplash.it/1024/768');
background-size: cover;
background-repeat: none;
background-position: center center;
}
.top{
  background: black;
}
.bottom{
  background
}
.left-nav {
  border: 1px solid gray;
}
.right-content {
  border: 1px dashed purple;
  height: 100px;
}

<link href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/skeleton.2.02.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" rel="stylesheet"/>
<!--Primary Page Layout
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<section class="home">
  <!--Middle Row-->
  <div class="row">
    <!--Top Row-->
    <div class="twelve columns top u-full-width">
      <h4 class="heading"><span class="demphasize">Teacher Application Submission for </span>Dwayne Neckles</h4>
    </div>
   </div>
    <!--Navigation-->
    <div class="row">
    <div class="left-nav one-third column">
      <nav>
        <ul>
          <li><a href="index.html">Home</a></li>
          <li><a href="biography.html">Biography</a></li>
          <li><a href="community.html">Community</a></li>
          <li><a href="leadership.html">Leadership</a></li>
        </ul>
      </nav>
    </div>
    <div class="right-content two-thirds column">
    </div>
    </div>
    <!--Footer Row-->
    <div class="row">
    <div class="twelve columns u-full-width">
      <h6 class="byline demphasize">Developed For</h6><img src="https://unsplash.it/204/52" width="204" height="52" alt="logo">
    </div>
  </div>
</section>