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

我想在我的页面中添加第三列，但不知道如何在不编辑当前代码的情况下添加第三列；有没有办法做到这一点？ （我真的不是最擅长编码的人，我为你们这些把脸捂起来的人道歉）

这是我当前的代码：

#标题{
背景色：黑色；
颜色：白色；
文本对齐：居中；
填充物：5px；
}
#导航{
线高：30px；
背景色：#eeeeee；
高度：300px；
宽度：100px；
浮动：左；
填充物：5px；
}
#部分{
宽度：350px；
浮动：左；
填充：10px；
}
#页脚{
背景色：黑色；
颜色：白色；
明确：两者皆有；
文本对齐：居中；
填充物：5px；
}
#旁白{
宽度：350px；
浮动：对；
填充：10px；
}

搜索引擎


















什么是搜索引擎？

搜索引擎是一种特殊的网站，它为数十亿页建立了索引，使您能够轻松地在瞬间找到网站或页面。流行的搜索引擎包括谷歌、雅虎、！，然后问。

要访问搜索引擎，您只需转到浏览器的地址栏并键入搜索引擎网站的地址，或者您可以使用通常位于浏览器右上角的搜索框。

搜索引擎是如何工作的？
每个搜索引擎的工作方式相似。如果你去搜索引擎的主页，你会发现一个单一的框。您只需在该框中键入要搜索的内容
佐伊是一个了不起的人。

以下是将其更改为三列的方法。 我已经修改了你的代码

我已经删除了#部分和#旁白的css

我已经修改了#nav的一些css属性

我创建了一个名为.column的css类，它应用于您的#section/#aside和我创建的第三列

Html:

以下是代码笔示例：

编辑：这个解决方案很简单，它不适用于非常小的屏幕尺寸。您可以尝试重新调整浏览器的宽度；您会注意到，如果浏览器的宽度太小，导航栏的宽度可能不够容纳其内容

---

此时，您可能希望查看媒体查询并为小视口定义另一组css规则

Hi Susan！我建议创建一个JSFIDLE来显示您的功能问题。下面是您的代码：而且，您可以在这里发布的任何代码都将非常有用。很多人宁愿从这里开始编写代码，也不愿去其他地方（甚至是小提琴）。

<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>

#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;
}