html - 如何在当前编码中添加第三列？

Question

我想在我的页面中添加第三列，但我不知道如何在不编辑当前代码的情况下这样做；有办法吗？(我真的不是最擅长编码的人，我为你们中那些打脸的人道歉)。

这是我当前的代码:

#header {
  background-color: black;
  color: white;
  text-align: center;
  padding: 5px;
}
#nav {
  line-height: 30px;
  background-color: #eeeeee;
  height: 300px;
  width: 100px;
  float: left;
  padding: 5px;
}
#section {
  width: 350px;
  float: left;
  padding: 10px;
}
#footer {
  background-color: black;
  color: white;
  clear: both;
  text-align: center;
  padding: 5px;
}
#aside {
  width: 350px;
  float: right;
  padding: 10px;
}

<div id="header">
  <u><h1 style="font-family:sans-serif; text-align:center">Search Engines</h1></u>
</div>

<div id="nav">
  <a href="http://www.excite.co.uk/">Excite</a>
  <br>
  <a href="http://www.google.co.uk/">Google</a>
  <br>
  <a href="http://www.yahoo.co.uk/">Yahoo</a>
  <br>
  <a href="http://www.bing.co.uk/">Bing</a>
  <br>
  <a href="http://www.askjeeves.co.uk/">AskJeeves</a>
  <br>
  <a href="http://www.duckduckgo.com/">DuckDuckGo</a>
  <br>
  <a href="http://www.aol.co.uk/">Aol</a>
  <br>
  <a href="http://www.wolframalpha.co.uk/">Wolfram Alpha</a>
  <br>
  <a href="http://www.overture.com/">Overture</a>
  <br>
</div>

<div id="section">
  <u><h2 style="font-family:sans-serif; text-align:center">What is a Search Engine?</h2></u>
  <p style="font-family:sans-serif; text-align:center">
    Search engines are special websites that have indexed billions of pages - and make it easy for you to find a website or page in an instant. Popular search engines include Google, Yahoo!, Bing and Ask.
    <p style="font-family:sans-serif; text-align:center">
      To get to a search engine you just need to go to your browser's address bar and type in the address of the search engine website, or you can use the search box that's usually found in the top right-hand corner of a browser.
    </p>
</div>

<div id="aside">
  <u><h2 style="font-family:sans-serif; text-align:center">How do Search Engines Work?</h2></u>
  <p style="font-family:sans-serif; text-align:center">Each search engine works in a similar way. If you go to a search engine's homepage, you'll find a single box. You simply type whatever you want to search for into that box.</p>
</div>

<div id="footer">
  Zoe is a fabulous human being.
</div>

Answer 1

这里是改成三列的方法。我已经修改了你的代码。

1. 我删除了#section 和#aside 的 css。
2. 我已经修改了#nav 的一些 css 属性
3. 我创建了一个名为 .column 的 CSS 类，它应用于您的#section/#aside 和我创建的第三列。

HTML:

<div id="header">
<u><h1 style="font-family:sans-serif; text-align:center">Search Engines</h1><u>
</div>

<div id="nav">
<a href="http://www.excite.co.uk/">Excite</a><br>
<a href="http://www.google.co.uk/">Google</a><br>
<a href="http://www.yahoo.co.uk/">Yahoo</a><br>
<a href="http://www.bing.co.uk/">Bing</a><br>
<a href="http://www.askjeeves.co.uk/">AskJeeves</a><br>
<a href="http://www.duckduckgo.com/">DuckDuckGo</a><br>
<a href="http://www.aol.co.uk/">Aol</a><br>
<a href="http://www.wolframalpha.co.uk/">Wolfram Alpha</a><br>
<a href="http://www.overture.com/">Overture</a><br>
</div>

<div class="column">
<u><h2 style="font-family:sans-serif; text-align:center">First Column</h2></u>
<p style="font-family:sans-serif; text-align:center">
Search engines are special websites that have indexed billions of pages - and make it easy for you to find a website or page in an  instant.
 Popular search engines include Google, Yahoo!, Bing and Ask.
<p style="font-family:sans-serif; text-align:center">
To get to a search engine you just need to go to your browser's address bar and type in the address of the search engine website,
 or you can use the search box that's usually found in the top right-hand corner of a browser.
</p>
</div>

<div class="column">
<u><h2 style="font-family:sans-serif; text-align:center">Second Column</h2></u>
<p style="font-family:sans-serif; text-align:center">Each search engine works in a similar way. If you go to a search engine's homepage,
 you'll find a single box. You simply type whatever you want to search for into that box.</p>
</div>

<div class="column">
<u><h2 style="font-family:sans-serif; text-align:center">Third Column</h2></u>
<p style="font-family:sans-serif; text-align:center">Each search engine works in a similar way. If you go to a search engine's homepage,
 you'll find a single box. You simply type whatever you want to search for into that box.</p>
</div>

<div id="footer">
Zoe is a fabulous human being.
</div>

CSS:

#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    float:left;
    padding:5px;

    box-sizing:border-box;
    width:10%;
}
#footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
   padding:5px;          
}

.column{
  box-sizing:border-box;
  width: 30%;
  float:left;
  padding: 10px;
}

这是代码笔示例:http://codepen.io/anon/pen/GgEmwJ

编辑:这个解决方案是一个简短的解决方案，它不适合非常小的屏幕尺寸。您可以尝试调整浏览器的宽度；您会注意到，如果浏览器的宽度太小，您的导航栏的宽度可能不足以容纳其内容。

此时您可能想要查看媒体查询并为小视口(viewport)定义另一组 css 规则