html - CSS 3 列布局在大屏幕宽度下折叠

Question

CSS 3-Column Layout 有以下代码段。然而，在非常大的屏幕宽度下，第一个 column 会折叠(大约 2000px)。我添加了导航代码，因为链接可能会影响列的显示。

CSS 和 HTML

#container
{
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

header h1
{       
  font-size: 40px;
  float: left;
  font-weight: 100;
}

header h1 a
{
  text-decoration: none;
  color: black;
}

header nav
{
  float: right;
}

header nav ul
{
  list-style-type: none;
  margin: 0;
  vertical-align: middle;
  line-height: normal;
  float: right;
  z-index: 999;
  position: relative; /* add this */
}

header nav ul li
{
  line-height: 15px;
  float: left;
  padding: 45px;
  font-size: 22px;
  font-weight: 100;
  text-align: center;
}

header nav ul li a
{
  color: black;
  text-decoration: none;
}

.content
{
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  font-size: 20px;
  line-height: 50px;
}

@media screen and (max-width: 1160px) {
  header h1
  {
    float: none;
    text-align: center;
    font-size: 36px;
  }

  header nav
  {
    width: 100%;
    margin-right: 20px;
  }

  header nav ul
  {
    float: none;
    text-align: center;
  }

  header nav ul li
  {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 25px;
  }
}

.col {
  float: left;
}

.col-1-3 {
  width: 33%
}

.col-1-3 a {
  font-weight: bold;
}

<div id="container">
  <header>
    <h1><a href="index.html"><strong>Henry</strong><span id="notbold">+Applications</span></a></h1>
    <nav>
      <ul>
        <li id="me"><div id="meanimation"><a href="about.html">Home</a></div></li>
        <li id="project"><div id="projectanimation"><a href="projects.html">Project</a></div></li>
        <li id="contact"><div id="contactanimation"><a href="contact.html">Contact</a></div></li>
      </ul>
    </nav>
  </header>
</div>
<br><br><br><br>
<div class="content">
  <div class="col col-1-3"><p><em>Email</em></p><p>This is the quickest way to contact me!</p>
    <a href="mailto:henry.david.zhu@gmail.com">The Fastest Way</a>
  </div>
  <div class="col col-1-3"><p><em>Phone</em></p><p>You can get in touch with me with a phone call or text!</p>
    <a href="tel:425-635-8007">Text Me</a>
  </div>
  <div class="col col-1-3"><p><em>Public Profile</em></p><p>Right now, I only have a Google+ profile, but I am sure to expand soon.</p>
    <a href="https://plus.google.com/103268596558478519359/posts">Google+</a><br>
    <a href="http://stackoverflow.com/users/3950533/henry-is-very-pro">StackOverflow</a>
  </div>
</div>

Answer 1

我在 .content 中添加了 overflow: hidden; 并且得到了很好的结果。

.content {
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  font-size: 20px;
  line-height: 50px;

  overflow: hidden;
}