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

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

我删除了#section和#aside的css。
我修改了#nav
我创建了一个名为.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;
}

以下是codepen示例：http://codepen.io/anon/pen/GgEmwJ

编辑：此解决方案是一个简短的解决方案，它不会占用非常小的屏幕尺寸。您可以尝试重新调整浏览器的宽度;您会注意到，如果浏览器的宽度太小，导航栏的宽度可能不足以满足其内容。

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

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

1 个答案: